<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <link rel="stylesheet" href="dist/styles/iview.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/icon/iconfont.css">
    <link rel="stylesheet" href="./videojs/bin.css">
    <link rel="stylesheet" href="./css/halower-tree.min.css">
    <link rel="stylesheet" href="./maptalks/maptalks.css">
    <link rel="stylesheet" href="./zTreeStyle/zTreeStyle.css">
    <script src="js/js.cookie.min.js"></script>
    <script src="js/polyfill.min.js"></script>
    <link rel="stylesheet" href="dist/elementui.css">

    <script>
        var token = localStorage.getItem("token");
        if (token == undefined) {
            window.location.href = "index.html";
        };
    </script>
</head>

<body>
    <!-- root -->
    <div id="app">
        <div class="header-wraper">
            <app-header @change-nav="changeComponent" :componentid="activeName"></app-header>
        </div>
        <div class="view-wraper">
            <keep-alive include="monitor">
                <component :is="activeName" ref="my-component" @jump-report="jumpReport"></component>
            </keep-alive>
        </div>
        <waring-component></waring-component>
        <!-- <video-player></video-player> -->
    </div>


    <!-- 头部模版 -->
    <script type="text/x-template" id="header-template">
        <div class="app-header">
            <div class="logo">
                <!-- <Icon type="ios-planet" style="vertical-align:top;font-size:50px;margin-top:2px"></Icon> -->
                <img :src="mainLogo" width="50px" height="50px" style="display:inline-block;margin-top:5px" />
                <span style="font-size:18px;vertical-align:top;">{{$t("login.title")}}</span>
            </div>
            <div class="app-nav">
                <i-menu mode="horizontal" theme="dark" :active-name="componentid" v-on:on-select="changeNav">
                    <template v-for="item in headMenuList" :key="item.name">
                            <menuItem :name="item.name" v-show="item.isShow">  
                                <Icon :type="item.icon"></Icon>
                                {{item.title}}
                            </menuItem> 
                        </template>
                </i-menu>
            </div>
            <div class="site_links">
                <ul>
                    <li style="padding-right:8px;">{{name}}</li>
                    <li style="padding:0" v-if="userType < 4">|</li>
                    <li v-if="userType < 4">
                        <span @click="jumpMessageHtml"><Icon type="ios-text" style="margin-right:3px"></Icon>{{$t("alarm.message")}}</span>
                    </li>
                    <li style="padding:0">|</li>
                    <li>
                        <span @click="serviceModal=true"><Icon type="ios-contact" style="margin-right:3px"></Icon>{{$t("header.contact")}}</span>
                    </li>
                    <li style="padding:0">|</li>
                    <li>
                        <span @click="showSetup"><Icon type="ios-hammer-outline" style="margin-right:3px"></Icon>{{$t("header.setting")}}</span>
                    </li>
                    <li style="padding:0">|</li>
                    <li>
                        <span @click="logout"><Icon type="ios-power" style="margin-right:3px"></Icon>{{$t("header.logout")}}</span>
                    </li>
                </ul>
            </div>

            <Modal v-model="modal" width="500">
                <p slot="header" style="color:#2D8CF0;text-align:center">
                    <Icon type="ios-hammer-outline"></Icon>
                    <span>{{$t("header.setting")}}</span>
                </p>
                <div style="text-align:center">
                    <Row style="margin: 10px 0">
                        <i-col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.setIntaival")}} : &nbsp;</i-col>
                        <i-col span="10" style="height: 100%;line-height:32px;">
                            <input-number :max="1800" :min="5" v-model="intervalTime" style="width:100%;"></input-number>
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.playbacklinewidth")}} : &nbsp;</i-col>
                        <i-col span="10" style="height: 100%;line-height:32px;">
                            <input-number :max="6" :min="1" v-model="playbacklinewidth" style="width:100%;"></input-number>
                        </i-col>
                        <i-col span="1" style="line-height:32px;">px</i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.changePwd")}} : &nbsp;</i-col>
                        <i-col span="10" style="height: 100%;line-height:32px;">
                            <i-button type="primary" style="width:100%;" @click="changePassword">{{$t("header.changePwd")}}</i-button>
                        </i-col>
                    </Row>
                </div>
                <div slot="footer" style="padding:12.5px 0;">
                    <div v-if="userType < 21">
                        <Row style="margin: 10px 0">
                            <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.name")}} : &nbsp;</i-col>
                            <i-col span="14">
                                <i-input v-model.trim="nickname"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">QQ : &nbsp;</i-col>
                            <i-col span="14">
                                <i-input v-model.trim="qq"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.wechat")}} : &nbsp;</i-col>
                            <i-col span="14">
                                <i-input v-model.trim="wechat"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.phone")}} : &nbsp;</i-col>
                            <i-col span="14">
                                <i-input v-model.trim="phone"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.email")}} : &nbsp;</i-col>
                            <i-col span="14">
                                <i-input v-model.trim="email"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.multiSiteLanding")}} : &nbsp;</i-col>
                            <i-col span="14">
                                <i-select v-model="multilogin" style="text-align:center;">
                                    <i-option value="1" style="text-align:center;">{{$t("header.yes")}}</i-option>
                                    <i-option value="0" style="text-align:center;">{{$t("header.no")}}</i-option>
                                </i-select>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="14" :offset="7">
                                <i-button type="primary" style="width:100%;" @click="handleEditMyInfo">{{$t("header.submit")}}</i-button>
                            </i-col>
                        </Row>
                    </div>

                </div>
            </Modal>

            <Modal v-model="modalPass" width="510">
                <p slot="header" style="color:#2D8CF0;text-align:center">
                    <Icon type="ios-hammer-outline"></Icon>
                    <span>{{$t("header.changePwd")}}</span>
                </p>
                <div style="text-align:center">
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.oldPwd")}} : &nbsp;</i-col>
                        <i-col span="16">
                            <i-input v-model.trim="oldPass"></i-input>
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.newPwd")}} : &nbsp;</i-col>
                        <i-col span="16">
                            <i-input v-model.trim="newPass" type="password"></i-input>
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.confirmPwd")}} : &nbsp;</i-col>
                        <i-col span="16">
                            <i-input v-model.trim="confirmPass" type="password"></i-input>
                        </i-col>
                    </Row>
                </div>
                <div slot="footer">
                    <i-button style="width: 100%" @click="changeUserPass" type="primary">{{$t("header.submit")}}</i-button>
                </div>
            </Modal>

            <Modal v-model="serviceModal" width="510">
                <p slot="header" style="color:#2D8CF0;text-align:center">
                    <Icon type="ios-contact"></Icon>
                    <span>{{$t("header.info")}}</span>
                </p>
                <div style="text-align:center">
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.name")}} : &nbsp;</i-col>
                        <i-col span="16" style="height: 100%;line-height:32px;">
                            {{creatername}}
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">QQ : &nbsp;</i-col>
                        <i-col span="16" style="height: 100%;line-height:32px;">
                            <a :href="aHref" id="floatQQ"> {{createrqq}}</a>
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.wechat")}} : &nbsp;</i-col>
                        <i-col span="16" style="height: 100%;line-height:32px;">
                            {{ createrwechat}}
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.phone")}} : &nbsp;</i-col>
                        <i-col span="16" style="height: 100%;line-height:32px;">
                            {{ createrphone}}
                        </i-col>
                    </Row>
                    <Row style="margin: 10px 0">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("header.email")}} : &nbsp;</i-col>
                        <i-col span="16" style="height: 100%;line-height:32px;">
                            {{createremail}}
                        </i-col>
                    </Row>
                </div>
            </Modal>
        </div>
    </script>

    <!-- 定位监控 -->
    <script type="text/x-template" id="monitor-template">
        <div class="monitor-wraper">
            <div class="devices-container">
                <div class="device-contorller">
                    <ul class="device-state">
                        <li :class="{active:selectedState=='all'}" @click="selectedStateNav('all')">
                            <p class="p-icon">
                                <Icon :size="24" type="ios-apps" />
                            </p>
                            <p class="dev-count">{{$t("monitor.all")}}({{allDevCount}})</p>
                        </li>
                        <li :class="{active:selectedState=='online'}" @click="selectedStateNav('online')">
                            <p class="p-icon">
                                <Icon :size="24" type="md-checkmark-circle" />
                            </p>
                            <p class="dev-count">{{$t("monitor.online")}}({{onlineDevCount}})</p>
                        </li>
                        <li :class="{active:selectedState=='offline'}" @click="selectedStateNav('offline')">
                            <p class="p-icon">
                                <Icon :size="24" type="ios-information-circle" />
                            </p>
                            <p class="dev-count">{{$t("monitor.offline")}}({{offlineDevCount}})</p>
                        </li>
                        <li :class="{active:selectedState=='stared'}" @click="selectedStateNav('stared')">
                            <p class="p-icon">
                                <Icon :size="24" type="md-heart" />
                            </p>
                            <p class="dev-count">{{$t("monitor.stared")}}({{staredDevCount}})</p>
                        </li>
                    </ul>
                    <div class="device-soso" v-click-outside.capture="blur">
                        <div class="search-wrapper">
                            <i-input v-model.trim="sosoValue" autocomplete="new-password" icon="ios-close-circle-outline" @on-click="cleanDev" @on-change="sosoValueChange" @on-click="focus" @on-focus="focus" :placeholder="placeholder"></i-input>
                            <transition name="fade">
                                <ul class="search-item-wrapper" v-show="isShowMatchDev">
                                    <li class="demo-auto-complete-item" v-for="item in filterData">
                                        <div class="demo-auto-complete-group">
                                            <span>{{ item.groupname }}</span>
                                        </div>
                                        <i-option v-for="option in item.devices" :value="option.groupname" :key="option.groupname">
                                            <span :style="{color:option.isOnline ? '#2d65a5':'#959595'}" @click="sosoSelect(option)" class="demo-auto-complete-title">{{ option.devicename }}-{{ option.deviceid }}</span>
                                        </i-option>
                                    </li>
                                </ul>
                            </transition>
                        </div>
                        <canvas width="720" height="450" id="V2I_canvas" style="display: none;"></canvas>
                    </div>
                </div>
                <div class='video-tree' v-if="!isMapMode">
                    <dl class="noselect" class="dl-inner-wrapper">
                        <template v-for="(group , index) in groups" :key="index" v-if="selectedState==='all'">
                            <dt style="padding:5px;border-bottom:1px solid #ddd;cursor: pointer;" @click="openGroupItem(group)">
                                <Icon type="ios-arrow-down" v-if="group.expand"/>
                                <Icon type="ios-arrow-forward" v-else/>
                                <b v-text="group.title"></b>
                            </dt>
                            <dd style="padding:5px;border-bottom:1px solid #ddd" v-if="group.expand">
                                <div v-for="(device , index) in group.devices" :key="device.deviceid" :id="device.deviceid" :data-id="device.deviceid" style="padding-left:15px">
                                    <div :class="{'active-dev-offline':device.isSelected}" style="margin:3px 0;" :ref="device.deviceid">
                                        <div class="video-device-cls"  @click="selectedDev(device)" @dblclick="dblClickDeviceVideo(device)">
                                            <span :class="[device.iconCls]"></span>
                                            <span v-html="device.devicetitle" class="video-device-title-cls" :style="{color: device.isOnline ? (device.isMoving ? '#2d65a5' :'#b53b3b') : '#959595'}"></span>   
                                            <span  @mouseover="handleMousemove($event)" style="width:32px;" v-if="device.isSelected">
                                                <Dropdown trigger="click" transfer :placement="placement" @on-click="handleClickMore" style="width:100%;">
                                                    <label size="small">{{$t("monitor.more")}}</label>
                                                    <i-dropdown-menu slot="list">
                                                        <DropdownItem name="name1"> 
                                                            <Dropdown transfer placement="right-start" @on-click="handleClickDirective" style="width:100%;">
                                                                {{$t("monitor.deviceCmd")}}
                                                                <Icon type="ios-arrow-forward"></Icon>
                                                                <i-dropdown-menu slot="list">
                                                                    <template v-for="(item, index) in currentDevDirectiveList" :key="item.cmdcode">
                                                                        <DropdownItem :name="item.cmdcode" >{{item.cmdname}}</DropdownItem>
                                                                    </template>
                        </i-dropdown-menu>
                        </Dropdown>
                        </DropdownItem>
                        <DropdownItem name="transferDeviceGroup">
                            <Dropdown transfer placement="right-start" @on-click="handleClickTransferDeviceGroup" style="width:100%;">
                                {{$t("monitor.gotogroup")}}
                                <Icon type="ios-arrow-forward"></Icon>
                                <i-dropdown-menu slot="list">
                                    <template v-for="(item, index) in currentDevCreateUserGroupList" :key="item.groupid"> 
                                                                        <DropdownItem :name="item.groupid" >{{item.groupname}}</DropdownItem>
                                                                    </template>
                                </i-dropdown-menu>
                            </Dropdown>
                        </DropdownItem>
                        <DropdownItem name="luyin" v-show="isShowRecordBtn">{{$t("monitor.media")}}</DropdownItem>
                        <DropdownItem name="bms" v-show="isShowBmsBtn">{{$t("monitor.batteryMgr")}}</DropdownItem>
                        <DropdownItem name="obd" v-show="isShowObdBtn">OBD</DropdownItem>
                        <DropdownItem name="watermeter" v-show="isShowWatermeterBtn">{{$t("monitor.watermeter")}}</DropdownItem>
                        <DropdownItem name="videosetting" v-if="isShowVideoBtn">{{$t("monitor.videoSettings")}}</DropdownItem>
                        <DropdownItem name="talk" v-if="isShowVideoBtn">{{$t("monitor.intercom")}}</DropdownItem>
                        <DropdownItem name="videoback" v-if="isShowVideoBtn">{{$t("monitor.videoPlayback")}}</DropdownItem>
                        <DropdownItem name="activesafety" v-if="isShowActiveSafetyBtn">{{$t("monitor.activeSafety")}}</DropdownItem>
                        <DropdownItem name="cmdrecord">{{$t("monitor.cmdRecord")}}</DropdownItem>
                        <DropdownItem name="alarmList">{{$t("monitor.alarmRecords")}}</DropdownItem>
                        <DropdownItem name="phoneAlarm">{{$t("reportForm.phoneAlarm")}}</DropdownItem>
                        <DropdownItem name="devbaseinfo">{{$t("monitor.devBaseInfo")}}</DropdownItem>
                        <DropdownItem name="ownerInfo">{{$t("monitor.ownerInfo")}}</DropdownItem>
                        </i-dropdown-menu>
                        </Dropdown>
                        <span>
                                        </div>
                                        <div v-for="(video,index) in device.videoChannels" v-if="device.isSelected" class="noselect">
                                            <p @dblclick="handlePlayDeviceToChannel(device,index)" style="padding:0px 10px;cursor: pointer;vertical-align: middle;height:24px;line-height:24px;"> <i class='icon iconfont icon-shexiangji' style="vertical-align: middle;"></i> {{video.name}}</p>
                                        </div>
                </div>
            </div>
            </dd>
            </template>
            <!-- 在线 -->
            <template v-for="(group , index) in groups" :key="index" v-if="selectedState==='online'">
                <dt style="padding:5px;border-bottom:1px solid #ddd;cursor: pointer;" @click="openGroupItem(group)" v-if="group.isShow">
                    <Icon type="ios-arrow-down" v-if="group.expand"/>
                    <Icon type="ios-arrow-forward" v-else/>
                    <b v-text="group.title"></b>
                </dt>
                <dd style="padding:5px;border-bottom:1px solid #ddd" v-if="group.expand && group.isShow">
                    <div v-for="(device , index) in group.devices" :key="device.deviceid" :id="device.deviceid" style="padding-left:15px" v-if="device.isOnline">
                        <div :class="{'active-dev-offline':device.isSelected}" style="margin:3px 0;" :ref="device.deviceid">
                            <div class="video-device-cls" :style="{color: device.isOnline ? (device.isMoving ? '#2d65a5' :'#b53b3b') : '#959595'}" @click="selectedDev(device)" @dblclick="dblClickDeviceVideo(device)">
                                <span :class="[device.iconCls]"></span>
                        <span v-html="device.devicetitle" class="video-device-title-cls" :style="{color: device.isOnline ? (device.isMoving ? '#2d65a5' :'#b53b3b') : '#959595'}"></span>
                        <span @mouseover="handleMousemove($event)" style="width:32px;" v-if="device.isSelected">
                                    <Dropdown trigger="click" transfer :placement="placement" @on-click="handleClickMore" style="width:100%;">
                                        <label size="small">{{$t("monitor.more")}}</label>
                                        <i-dropdown-menu slot="list">
                                            <DropdownItem name="name1"> 
                                                <Dropdown transfer placement="right-start" @on-click="handleClickDirective" style="width:100%;">
                                                    {{$t("monitor.deviceCmd")}}
                                                    <Icon type="ios-arrow-forward"></Icon>
                                                    <i-dropdown-menu slot="list">
                                                        <template v-for="(item, index) in currentDevDirectiveList" :key="item.cmdcode">
                                                            <DropdownItem :name="item.cmdcode" >{{item.cmdname}}</DropdownItem>
                                                        </template>
                                            </i-dropdown-menu>
                                            </Dropdown>
                                            </DropdownItem>
                                            <DropdownItem name="transferDeviceGroup">
                                                <Dropdown transfer placement="right-start" @on-click="handleClickTransferDeviceGroup" style="width:100%;">
                                                    {{$t("monitor.gotogroup")}}
                                                    <Icon type="ios-arrow-forward"></Icon>
                                                    <i-dropdown-menu slot="list">
                                                        <template v-for="(item, index) in currentDevCreateUserGroupList" :key="item.groupid"> 
                                                            <DropdownItem :name="item.groupid" >{{item.groupname}}</DropdownItem>
                                                        </template>
                                                    </i-dropdown-menu>
                                                </Dropdown>
                                            </DropdownItem>
                                            <DropdownItem name="luyin" v-show="isShowRecordBtn">{{$t("monitor.media")}}</DropdownItem>
                                            <DropdownItem name="bms" v-show="isShowBmsBtn">{{$t("monitor.batteryMgr")}}</DropdownItem>
                                            <DropdownItem name="obd" v-show="isShowObdBtn">OBD</DropdownItem>
                                            <DropdownItem name="watermeter" v-show="isShowWatermeterBtn">{{$t("monitor.watermeter")}}</DropdownItem>
                                            <DropdownItem name="videosetting" v-if="isShowVideoBtn">{{$t("monitor.videoSettings")}}</DropdownItem>
                                            <DropdownItem name="talk" v-if="isShowVideoBtn">{{$t("monitor.intercom")}}</DropdownItem>
                                            <DropdownItem name="videoback" v-if="isShowVideoBtn">{{$t("monitor.videoPlayback")}}</DropdownItem>
                                            <DropdownItem name="activesafety" v-if="isShowActiveSafetyBtn">{{$t("monitor.activeSafety")}}</DropdownItem>
                                            <DropdownItem name="cmdrecord">{{$t("monitor.cmdRecord")}}</DropdownItem>
                                            <DropdownItem name="alarmList">{{$t("monitor.alarmRecords")}}</DropdownItem>
                                            <DropdownItem name="phoneAlarm">{{$t("reportForm.phoneAlarm")}}</DropdownItem>
                                            <DropdownItem name="devbaseinfo">{{$t("monitor.devBaseInfo")}}</DropdownItem>
                                            <DropdownItem name="ownerInfo">{{$t("monitor.ownerInfo")}}</DropdownItem>
                                            </i-dropdown-menu>
                                            </Dropdown>
                                            <span>
                            </div>
                            <div v-for="(video,index) in device.videoChannels" v-if="device.isSelected" class="noselect">
                                <p @dblclick="handlePlayDeviceToChannel(device,index)" style="padding:0px 10px;cursor: pointer;vertical-align: middle;height:24px;line-height:24px;"> <i class='icon iconfont icon-shexiangji' style="vertical-align: middle;"></i> {{video.name}}</p>
                            </div>   
                    </div>
                </dd>
            </template>
                    <!-- 离线 -->
                    <template v-for="(group , index) in groups" :key="index" v-if="selectedState==='offline'">
                        <dt style="padding:5px;border-bottom:1px solid #ddd;cursor: pointer;" @click="openGroupItem(group)" v-if="group.isShow">
                            <Icon type="ios-arrow-down" v-if="group.expand"/>
                            <Icon type="ios-arrow-forward" v-else/>
                            <b v-text="group.title"></b>
                        </dt>
                        <dd style="padding:5px;border-bottom:1px solid #ddd" v-if="group.expand && group.isShow">
                            <div v-for="(device , index) in group.devices" :key="device.deviceid" :id="device.deviceid" style="padding-left:15px" v-if="device.isOffline">
                                <div :class="{'active-dev-offline':device.isSelected}" style="margin:3px 0;" :ref="device.deviceid">
                                    <div class="video-device-cls" @click="selectedDev(device)" @dblclick="dblClickDeviceVideo(device)">
                                        <span :class="[device.iconCls]"></span>
                        <span v-html="device.devicetitle" class="video-device-title-cls" :style="{color: device.isOnline ? (device.isMoving ? '#2d65a5' :'#b53b3b') : '#959595'}"></span>
                        <span @mouseover="handleMousemove($event)" style="width:32px;" v-if="device.isSelected">
                                            <Dropdown trigger="click" transfer :placement="placement" @on-click="handleClickMore" style="width:100%;">
                                                <label size="small">{{$t("monitor.more")}}</label>
                                                <i-dropdown-menu slot="list">
                                                    <DropdownItem name="name1"> 
                                                        <Dropdown transfer placement="right-start" @on-click="handleClickDirective" style="width:100%;">
                                                            {{$t("monitor.deviceCmd")}}
                                                            <Icon type="ios-arrow-forward"></Icon>
                                                            <i-dropdown-menu slot="list">
                                                                <template v-for="(item, index) in currentDevDirectiveList" :key="item.cmdcode">
                                                                    <DropdownItem :name="item.cmdcode" >{{item.cmdname}}</DropdownItem>
                                                                </template>
                                                    </i-dropdown-menu>
                                                    </Dropdown>
                                                    </DropdownItem>
                                                    <DropdownItem name="transferDeviceGroup">
                                                        <Dropdown transfer placement="right-start" @on-click="handleClickTransferDeviceGroup" style="width:100%;">
                                                            {{$t("monitor.gotogroup")}}
                                                            <Icon type="ios-arrow-forward"></Icon>
                                                            <i-dropdown-menu slot="list">
                                                                <template v-for="(item, index) in currentDevCreateUserGroupList" :key="item.groupid"> 
                                                                    <DropdownItem :name="item.groupid" >{{item.groupname}}</DropdownItem>
                                                                </template>
                                                            </i-dropdown-menu>
                                                        </Dropdown>
                                                    </DropdownItem>
                                                    <DropdownItem name="luyin" v-show="isShowRecordBtn">{{$t("monitor.media")}}</DropdownItem>
                                                    <DropdownItem name="bms" v-show="isShowBmsBtn">{{$t("monitor.batteryMgr")}}</DropdownItem>
                                                    <DropdownItem name="obd" v-show="isShowObdBtn">OBD</DropdownItem>
                                                    <DropdownItem name="watermeter" v-show="isShowWatermeterBtn">{{$t("monitor.watermeter")}}</DropdownItem>
                                                    <DropdownItem name="videosetting" v-if="isShowVideoBtn">{{$t("monitor.videoSettings")}}</DropdownItem>
                                                    <DropdownItem name="talk" v-if="isShowVideoBtn">{{$t("monitor.intercom")}}</DropdownItem>
                                                    <DropdownItem name="videoback" v-if="isShowVideoBtn">{{$t("monitor.videoPlayback")}}</DropdownItem>
                                                    <DropdownItem name="activesafety" v-if="isShowActiveSafetyBtn">{{$t("monitor.activeSafety")}}</DropdownItem>
                                                    <DropdownItem name="cmdrecord">{{$t("monitor.cmdRecord")}}</DropdownItem>
                                                    <DropdownItem name="alarmList">{{$t("monitor.alarmRecords")}}</DropdownItem>
                                                    <DropdownItem name="phoneAlarm">{{$t("reportForm.phoneAlarm")}}</DropdownItem>
                                                    <DropdownItem name="devbaseinfo">{{$t("monitor.devBaseInfo")}}</DropdownItem>
                                                    <DropdownItem name="ownerInfo">{{$t("monitor.ownerInfo")}}</DropdownItem>
                                                    </i-dropdown-menu>
                                                    </Dropdown>
                                                    <span>
                                    </div>
                                    <div v-for="(video,index) in device.videoChannels" v-if="device.isSelected" class="noselect">
                                        <p @dblclick="handlePlayDeviceToChannel(device,index)" style="padding:0px 10px;cursor: pointer;vertical-align: middle;height:24px;line-height:24px;"> <i class='icon iconfont icon-shexiangji' style="vertical-align: middle;"></i> {{video.name}}</p>
                                    </div>

                            </div>
                            </dd>
                            </template>
                        

        <template v-for="(group , index) in groups" :key="index" v-if="selectedState==='stared'">
            <dt style="padding:5px;border-bottom:1px solid #ddd;cursor: pointer;" @click="openGroupItem(group)" v-if="group.isShow">
                <Icon type="ios-arrow-down" v-if="group.expand"/>
                <Icon type="ios-arrow-forward" v-else/>
                <b v-text="group.title"></b>
            </dt>
            <dd style="padding:5px;border-bottom:1px solid #ddd" v-if="group.expand && group.isShow">
                <div v-for="(device , index) in group.devices" :key="device.deviceid" :id="device.deviceid" style="padding-left:15px" v-if="device.isStared">
                    <div :class="{'active-dev-offline':device.isSelected}" style="margin:3px 0;" :ref="device.deviceid">
                        <div class="video-device-cls" :style="{color: device.isOnline ? (device.isMoving ? '#2d65a5' :'#b53b3b') : '#959595'}" @click="selectedDev(device)" @dblclick="dblClickDeviceVideo(device)">
                            <span style="width:18px;"><i class='icon iconfont' :class="{'icon-xingzhuang':device.isVedio,'icon-car':!device.isVedio}"></i></span>
                        <span v-html="device.devicetitle" class="video-device-title-cls"></span>
                        <span @mouseover="handleMousemove($event)" style="width:32px;" v-if="device.isSelected">
                                <Dropdown trigger="click" transfer :placement="placement" @on-click="handleClickMore" style="width:100%;">
                                    <label size="small">{{$t("monitor.more")}}</label>
                                    <i-dropdown-menu slot="list">
                                        <DropdownItem name="name1"> 
                                            <Dropdown transfer placement="right-start" @on-click="handleClickDirective" style="width:100%;">
                                                {{$t("monitor.deviceCmd")}}
                                                <Icon type="ios-arrow-forward"></Icon>
                                                <i-dropdown-menu slot="list">
                                                    <template v-for="(item, index) in currentDevDirectiveList" :key="item.cmdcode">
                                                        <DropdownItem :name="item.cmdcode" >{{item.cmdname}}</DropdownItem>
                                                    </template>
                                        </i-dropdown-menu>
                                        </Dropdown>
                                        </DropdownItem>
                                        <DropdownItem name="transferDeviceGroup">
                                            <Dropdown transfer placement="right-start" @on-click="handleClickTransferDeviceGroup" style="width:100%;">
                                                {{$t("monitor.gotogroup")}}
                                                <Icon type="ios-arrow-forward"></Icon>
                                                <i-dropdown-menu slot="list">
                                                    <template v-for="(item, index) in currentDevCreateUserGroupList" :key="item.groupid"> 
                                                        <DropdownItem :name="item.groupid" >{{item.groupname}}</DropdownItem>
                                                    </template>
                                                </i-dropdown-menu>
                                            </Dropdown>
                                        </DropdownItem>
                                        <DropdownItem name="luyin" v-show="isShowRecordBtn">{{$t("monitor.media")}}</DropdownItem>
                                        <DropdownItem name="bms" v-show="isShowBmsBtn">{{$t("monitor.batteryMgr")}}</DropdownItem>
                                        <DropdownItem name="obd" v-show="isShowObdBtn">OBD</DropdownItem>
                                        <DropdownItem name="watermeter" v-show="isShowWatermeterBtn">{{$t("monitor.watermeter")}}</DropdownItem>
                                        <DropdownItem name="videosetting" v-if="isShowVideoBtn">{{$t("monitor.videoSettings")}}</DropdownItem>
                                        <DropdownItem name="talk" v-if="isShowVideoBtn">{{$t("monitor.intercom")}}</DropdownItem>
                                        <DropdownItem name="videoback" v-if="isShowVideoBtn">{{$t("monitor.videoPlayback")}}</DropdownItem>
                                        <DropdownItem name="activesafety" v-if="isShowActiveSafetyBtn">{{$t("monitor.activeSafety")}}</DropdownItem>
                                        <DropdownItem name="cmdrecord">{{$t("monitor.cmdRecord")}}</DropdownItem>
                                        <DropdownItem name="alarmList">{{$t("monitor.alarmRecords")}}</DropdownItem>
                                        <DropdownItem name="phoneAlarm">{{$t("reportForm.phoneAlarm")}}</DropdownItem>
                                        <DropdownItem name="devbaseinfo">{{$t("monitor.devBaseInfo")}}</DropdownItem>
                                        <DropdownItem name="ownerInfo">{{$t("monitor.ownerInfo")}}</DropdownItem>
                                        </i-dropdown-menu>
                                        </Dropdown>
                                        <span>
                        </div>
                        <div v-for="(video,index) in device.videoChannels" v-if="device.isSelected" class="noselect">
                            <p @dblclick="handlePlayDeviceToChannel(device,index)" style="padding:0px 10px;cursor: pointer;vertical-align: middle;height:24px;line-height:24px;"> <i class='icon iconfont icon-shexiangji' style="vertical-align: middle;"></i> {{video.name}}</p>
                        </div>
                </div>
            </dd>
        </template>
        
                    </dl>                    
                </div>
                <div class="device-tree" ref="treeWraper" v-if="isMapMode">
                    <!-- left tree controller 不显示公司名 -->
                    <dl class="noselect" v-if="!isShowCompanyName" class="dl-inner-wrapper">
                        <!-- all -->
                        <template v-for="(group , index) in groups" :key="index" v-if="selectedState==='all'">
                            <dt style="padding:5px;border-bottom:1px solid #ddd;cursor: pointer;" @click="openGroupItem(group)">
                                <Icon type="ios-arrow-down" v-if="group.expand"/>
                                <Icon type="ios-arrow-forward" v-else/>
                                <b v-text="group.title"></b>
                            </dt>
                            <dd style="padding:5px;border-bottom:1px solid #ddd" v-if="group.expand">
                                <div v-for="(device , index) in group.devices" :key="device.deviceid" :id="device.deviceid" :data-id="device.deviceid" style="padding-left:15px">
                                    <div :class="{'active-dev-offline':device.isSelected}" style="margin:3px 0;" :ref="device.deviceid">
                                        <div class="video-device-cls" style="padding:3px 5px;cursor: pointer;"  @click="selectedDev(device)">
                                            <span :class="[device.iconCls]"></span>
                        <span v-html="device.devicetitle" class="device-title-cls" :style="{color: device.isOnline ? (device.isMoving ? '#2d65a5' :'#b53b3b') : '#959595'}"></span>
                </div>
                <ul class="device-controller" v-if="device.isSelected">
                    <li @click="editDevice(device.deviceid)">
                        <Icon type="ios-create" />
                        <p>{{$t("monitor.edit")}}</p>
                        <li>
                            <li @click="playBack(device.deviceid)">
                                <Icon type="md-planet" />
                                <p>{{$t("monitor.track")}}</p>
                                <li>
                                    <li v-if="isShowVideoBtn" @click="playerVideos">
                                        <Icon type="ios-play" />
                                        <p>{{$t("monitor.play")}}</p>
                                        <li>
                                            <li v-if="!isShowVideoBtn" @click="trackMap(device.deviceid)">
                                                <Icon type="md-person" />
                                                <p>{{$t("monitor.following")}}</p>
                                                <li>
                                                    <li @mouseover="handleMousemove($event)">
                                                        <Dropdown trigger="click" transfer :placement="placement" @on-click="handleClickMore" style="width:100%;">
                                                            <Icon type="ios-list" />
                                                            <p>{{$t("monitor.more")}}</p>
                                                            <i-dropdown-menu slot="list">
                                                                <DropdownItem name="name1">
                                                                    <Dropdown transfer placement="right-start" @on-click="handleClickDirective" style="width:100%;">
                                                                        {{$t("monitor.deviceCmd")}}
                                                                        <Icon type="ios-arrow-forward"></Icon>
                                                                        <i-dropdown-menu slot="list">
                                                                            <template v-for="(item, index) in currentDevDirectiveList" :key="item.cmdcode">
                                                                        <DropdownItem :name="item.cmdcode" >{{item.cmdname}}</DropdownItem>
                                                                    </template>
                                                                        </i-dropdown-menu>
                                                                    </Dropdown>
                                                                </DropdownItem>
                                                                <DropdownItem name="transferDeviceGroup">
                                                                    <Dropdown transfer placement="right-start" @on-click="handleClickTransferDeviceGroup" style="width:100%;">
                                                                        {{$t("monitor.gotogroup")}}
                                                                        <Icon type="ios-arrow-forward"></Icon>
                                                                        <i-dropdown-menu slot="list">
                                                                            <template v-for="(item, index) in currentDevCreateUserGroupList" :key="item.groupid"> 
                                        <DropdownItem :name="item.groupid" >{{item.groupname}}</DropdownItem>
                                    </template>
                                                                        </i-dropdown-menu>
                                                                    </Dropdown>
                                                                </DropdownItem>
                                                                <DropdownItem name="luyin" v-show="isShowRecordBtn">{{$t("monitor.media")}}</DropdownItem>
                                                                <DropdownItem name="bms" v-show="isShowBmsBtn">{{$t("monitor.batteryMgr")}}</DropdownItem>
                                                                <DropdownItem name="obd" v-show="isShowObdBtn">OBD</DropdownItem>
                                                                <DropdownItem name="watermeter" v-show="isShowWatermeterBtn">{{$t("monitor.watermeter")}}</DropdownItem>
                                                                <DropdownItem name="cmdrecord">{{$t("monitor.cmdRecord")}}</DropdownItem>
                                                                <DropdownItem name="alarmList">{{$t("monitor.alarmRecords")}}</DropdownItem>
                                                                <DropdownItem name="phoneAlarm">{{$t("reportForm.phoneAlarm")}}</DropdownItem>
                                                                <DropdownItem name="devbaseinfo">{{$t("monitor.devBaseInfo")}}</DropdownItem>
                                                                <DropdownItem name="ownerInfo">{{$t("monitor.ownerInfo")}}</DropdownItem>
                                                            </i-dropdown-menu>
                                                        </Dropdown>
                                                        <li>
                </ul>
            </div>
        </div>
        </dd>
        </template>
        <!-- online -->
        <template v-for="(group , index) in groups" :key="index" v-if="selectedState==='online'">
                                <dt style="padding:5px;border-bottom:1px solid #ddd;cursor: pointer;" @click="openGroupItem(group)" v-if="group.isShow">
                                    <Icon type="ios-arrow-down" v-if="group.expand"/>
                                    <Icon type="ios-arrow-forward" v-else/>
                                    <b v-text="group.title"></b>
                                </dt>
                                <dd style="padding:5px;border-bottom:1px solid #ddd" v-if="group.expand && group.isShow">
                                    <div v-for="(device , index) in group.devices" :key="device.deviceid" :id="device.deviceid" style="padding-left:15px" v-if="device.isOnline">
                                        <div :class="{'active-dev-offline':device.isSelected}" style="margin:3px 0;" :ref="device.deviceid">
                                            <div style="padding:3px 5px;cursor: pointer;" class="video-device-cls" >
                                                <span :class="[device.iconCls]"></span>
                                                <span v-html="device.devicetitle" class="device-title-cls" :style="{color: device.isOnline ? (device.isMoving ? '#2d65a5' :'#b53b3b') : '#959595'}" @click="selectedDev(device)"></span> 
                                            </div>
                                            <ul class="device-controller" v-if="device.isSelected">
                                                <li @click="editDevice(device.deviceid)"><Icon type="ios-create"/><p>{{$t("monitor.edit")}}</p><li>
                                                <li @click="playBack(device.deviceid)"><Icon type="md-planet"/><p>{{$t("monitor.track")}}</p><li>
                                                <li v-if="isShowVideoBtn" @click="playerVideos"><Icon type="ios-play"/><p>{{$t("monitor.play")}}</p><li>  
                                                <li v-if="!isShowVideoBtn" @click="trackMap(device.deviceid)"><Icon type="md-person"/><p>{{$t("monitor.following")}}</p><li> 
                                                <li  @mouseover="handleMousemove($event)">
                                                    <Dropdown trigger="click" transfer :placement="placement" @on-click="handleClickMore" style="width:100%;">
                                                        <Icon type="ios-list"/><p>{{$t("monitor.more")}}</p>
                                                        <i-dropdown-menu slot="list">
                                                            <DropdownItem name="name1"> 
                                                                <Dropdown transfer placement="right-start" @on-click="handleClickDirective" style="width:100%;">
                                                                    {{$t("monitor.deviceCmd")}}
                                                                    <Icon type="ios-arrow-forward"></Icon>
                                                                    <i-dropdown-menu slot="list">
                                                                        <template v-for="(item, index) in currentDevDirectiveList" :key="item.cmdcode">
                                                                            <DropdownItem :name="item.cmdcode" >{{item.cmdname}}</DropdownItem>
                                                                        </template>
        </i-dropdown-menu>
        </Dropdown>
        </DropdownItem>
        <DropdownItem name="transferDeviceGroup">
            <Dropdown transfer placement="right-start" @on-click="handleClickTransferDeviceGroup" style="width:100%;">
                {{$t("monitor.gotogroup")}}
                <Icon type="ios-arrow-forward"></Icon>
                <i-dropdown-menu slot="list">
                    <template v-for="(item, index) in currentDevCreateUserGroupList" :key="item.groupid"> 
                            <DropdownItem :name="item.groupid" >{{item.groupname}}</DropdownItem>
                        </template>
                </i-dropdown-menu>
            </Dropdown>
        </DropdownItem>
        <DropdownItem name="luyin" v-show="isShowRecordBtn">{{$t("monitor.media")}}</DropdownItem>
        <DropdownItem name="bms" v-show="isShowBmsBtn">{{$t("monitor.batteryMgr")}}</DropdownItem>
        <DropdownItem name="obd" v-show="isShowObdBtn">OBD</DropdownItem>
        <DropdownItem name="watermeter" v-show="isShowWatermeterBtn">{{$t("monitor.watermeter")}}</DropdownItem>
        <DropdownItem name="cmdrecord">{{$t("monitor.cmdRecord")}}</DropdownItem>
        <DropdownItem name="alarmList">{{$t("monitor.alarmRecords")}}</DropdownItem>
        <DropdownItem name="phoneAlarm">{{$t("reportForm.phoneAlarm")}}</DropdownItem>
        <DropdownItem name="devbaseinfo">{{$t("monitor.devBaseInfo")}}</DropdownItem>
        <DropdownItem name="ownerInfo">{{$t("monitor.ownerInfo")}}</DropdownItem>
        </i-dropdown-menu>
        </Dropdown>
        <li>
            </ul>
            </div>
            </div>
            </dd>
            </template>
            <!-- 库存开头 -->
            <template v-for="(group , index) in groups" :key="index" v-if="selectedState==='stared'">
                                <dt style="padding:5px;border-bottom:1px solid #ddd;cursor: pointer;" @click="openGroupItem(group)" v-if="group.isShow">
                                    <Icon type="ios-arrow-down" v-if="group.expand"/>
                                    <Icon type="ios-arrow-forward" v-else/>
                                    <b v-text="group.title"></b>
                                </dt>
                                <dd style="padding:5px;border-bottom:1px solid #ddd" v-if="group.expand && group.isShow">
                                    <div v-for="(device , index) in group.devices" :key="device.deviceid" :id="device.deviceid" style="padding-left:15px" v-if="device.isStared">
                                        <div :class="{'active-dev-offline':device.isSelected}" style="margin:3px 0;" :ref="device.deviceid">
                                            <div style="padding:3px 5px;cursor: pointer;" class="video-device-cls">
                                                <span  :class="[device.iconCls]"></span>
                                                <span v-html="device.devicetitle" class="device-title-cls" :style="{color: device.isOnline ? (device.isMoving ? '#2d65a5' :'#b53b3b') : '#959595'}" @click="selectedDev(device)"></span> 
                                            </div>
                                            <ul class="device-controller" v-if="device.isSelected">
                                                <li @click="editDevice(device.deviceid)"><Icon type="ios-create"/><p>{{$t("monitor.edit")}}</p><li>
                                                <li @click="playBack(device.deviceid)"><Icon type="md-planet"/><p>{{$t("monitor.track")}}</p><li>
                                                <li v-if="isShowVideoBtn" @click="playerVideos"><Icon type="ios-play"/><p>{{$t("monitor.play")}}</p><li> 
                                                <li v-if="!isShowVideoBtn" @click="trackMap(device.deviceid)"><Icon type="md-person"/><p>{{$t("monitor.following")}}</p><li> 
                                                <li  @mouseover="handleMousemove($event)">
                                                    <Dropdown trigger="click" transfer :placement="placement" @on-click="handleClickMore" style="width:100%;">
                                                        <Icon type="ios-list"/><p>{{$t("monitor.more")}}</p>
                                                        <i-dropdown-menu slot="list">
                                                            <DropdownItem name="name1"> 
                                                                <Dropdown transfer placement="right-start" @on-click="handleClickDirective" style="width:100%;">
                                                                    {{$t("monitor.deviceCmd")}}
                                                                    <Icon type="ios-arrow-forward"></Icon>
                                                                    <i-dropdown-menu slot="list">
                                                                        <template v-for="(item, index) in currentDevDirectiveList" :key="item.cmdcode">
                                                                            <DropdownItem :name="item.cmdcode" >{{item.cmdname}}</DropdownItem>
                                                                        </template>
            </i-dropdown-menu>
            </Dropdown>
            </DropdownItem>
            <DropdownItem name="transferDeviceGroup">
                <Dropdown transfer placement="right-start" @on-click="handleClickTransferDeviceGroup" style="width:100%;">
                    {{$t("monitor.gotogroup")}}
                    <Icon type="ios-arrow-forward"></Icon>
                    <i-dropdown-menu slot="list">
                        <template v-for="(item, index) in currentDevCreateUserGroupList" :key="item.groupid"> 
                        <DropdownItem :name="item.groupid" >{{item.groupname}}</DropdownItem>
                    </template>
                    </i-dropdown-menu>
                </Dropdown>
            </DropdownItem>
            <DropdownItem name="luyin" v-show="isShowRecordBtn">{{$t("monitor.media")}}</DropdownItem>
            <DropdownItem name="bms" v-show="isShowBmsBtn">{{$t("monitor.batteryMgr")}}</DropdownItem>
            <DropdownItem name="obd" v-show="isShowObdBtn">OBD</DropdownItem>
            <DropdownItem name="watermeter" v-show="isShowWatermeterBtn">{{$t("monitor.watermeter")}}</DropdownItem>
            <DropdownItem name="cmdrecord">{{$t("monitor.cmdRecord")}}</DropdownItem>
            <DropdownItem name="alarmList">{{$t("monitor.alarmRecords")}}</DropdownItem>
            <DropdownItem name="phoneAlarm">{{$t("reportForm.phoneAlarm")}}</DropdownItem>
            <DropdownItem name="devbaseinfo">{{$t("monitor.devBaseInfo")}}</DropdownItem>
            <DropdownItem name="ownerInfo">{{$t("monitor.ownerInfo")}}</DropdownItem>
            </i-dropdown-menu>
            </Dropdown>
            <li>
                </ul>
                </div>
                </div>
                </dd>
                </template>
                <!-- offline -->
                <template v-for="(group , index) in groups" :key="index" v-if="selectedState==='offline'">
            <dt style="padding:5px;border-bottom:1px solid #ddd;cursor: pointer;" @click="openGroupItem(group)" v-if="group.isShow">
                <Icon type="ios-arrow-down" v-if="group.expand"/>
                <Icon type="ios-arrow-forward" v-else/>
                <b v-text="group.title"></b>
            </dt>
            <dd style="padding:5px;border-bottom:1px solid #ddd" v-if="group.expand && group.isShow">
                <div v-for="(device , index) in group.devices" :key="device.deviceid" :id="device.deviceid" style="padding-left:15px" v-if="device.isOffline">
                    <div :class="{'active-dev-offline':device.isSelected}" style="margin:3px 0;" :ref="device.deviceid">
                        <div style="padding:3px 5px;cursor: pointer;" class="video-device-cls" @click="selectedDev(device)">
                            <span :class="[device.iconCls]"></span>
                            <span v-html="device.devicetitle" class="device-title-cls" :style="{color:'#959595'}"></span> 
                        </div>
                        <ul class="device-controller" v-if="device.isSelected">
                            <li @click="editDevice(device.deviceid)"><Icon type="ios-create"/><p>{{$t("monitor.edit")}}</p><li>
                            <li @click="playBack(device.deviceid)"><Icon type="md-planet"/><p>{{$t("monitor.track")}}</p><li>
                            <li v-if="isShowVideoBtn" @click="playerVideos"><Icon type="ios-play"/><p>{{$t("monitor.play")}}</p><li> 
                            <li v-if="!isShowVideoBtn" @click="trackMap(device.deviceid)"><Icon type="md-person"/><p>{{$t("monitor.following")}}</p><li> 
                            <li  @mouseover="handleMousemove($event)">
                                <Dropdown trigger="click" transfer :placement="placement" @on-click="handleClickMore" style="width:100%;">
                                    <Icon type="ios-list"/><p>{{$t("monitor.more")}}</p>
                                    <i-dropdown-menu slot="list">
                                        <DropdownItem name="name1"> 
                                            <Dropdown transfer placement="right-start" @on-click="handleClickDirective" style="width:100%;">
                                                {{$t("monitor.deviceCmd")}}
                                                <Icon type="ios-arrow-forward"></Icon>
                                                <i-dropdown-menu slot="list">
                                                    <template v-for="(item, index) in currentDevDirectiveList" :key="item.cmdcode">
                                                        <DropdownItem :name="item.cmdcode" >{{item.cmdname}}</DropdownItem>
                                                    </template>
                </i-dropdown-menu>
                </Dropdown>
                </DropdownItem>
                <DropdownItem name="transferDeviceGroup">
                    <Dropdown transfer placement="right-start" @on-click="handleClickTransferDeviceGroup" style="width:100%;">
                        {{$t("monitor.gotogroup")}}
                        <Icon type="ios-arrow-forward"></Icon>
                        <i-dropdown-menu slot="list">
                            <template v-for="(item, index) in currentDevCreateUserGroupList" :key="item.groupid"> 
                            <DropdownItem :name="item.groupid" >{{item.groupname}}</DropdownItem>
                        </template>
                        </i-dropdown-menu>
                    </Dropdown>
                </DropdownItem>
                <DropdownItem name="luyin" v-show="isShowRecordBtn">{{$t("monitor.media")}}</DropdownItem>
                <DropdownItem name="bms" v-show="isShowBmsBtn">{{$t("monitor.batteryMgr")}}</DropdownItem>
                <DropdownItem name="obd" v-show="isShowObdBtn">OBD</DropdownItem>
                <DropdownItem name="watermeter" v-show="isShowWatermeterBtn">{{$t("monitor.watermeter")}}</DropdownItem>
                <DropdownItem name="cmdrecord">{{$t("monitor.cmdRecord")}}</DropdownItem>
                <DropdownItem name="alarmList">{{$t("monitor.alarmRecords")}}</DropdownItem>
                <DropdownItem name="phoneAlarm">{{$t("reportForm.phoneAlarm")}}</DropdownItem>
                <DropdownItem name="devbaseinfo">{{$t("monitor.devBaseInfo")}}</DropdownItem>
                <DropdownItem name="ownerInfo">{{$t("monitor.ownerInfo")}}</DropdownItem>
                </i-dropdown-menu>
                </Dropdown>
                <li>
                    </ul>
                    </div>
                    </div>
                    </dd>
                    </template>
                    <!-- 库存结尾 -->
                    </dl>
                    </div>
                    <div class="group-spin-wraper" v-if="isLoadGroup">
                        <Spin fix size="large"></Spin>
                    </div>
                    </div>
                    <div class="map-wraper" ref="mapWraper" @mousemove="onMousemoveMap">
                        <div class="map_manager" :style='{height:isMouseoverTop35?"0px":"35px",overflow:isMouseoverTop35?"hidden":"visible"}'>
                            <div style="float:left;height:33px; line-height:33px;padding-left:2px;">
                                <ButtonGroup size="small" shape="circle">
                                    <i-button @click="switchMapMode(1)" :type="isMapMode?'primary':''">{{$t("monitor.mapMode")}}</i-button>
                                    <i-button @click="switchMapMode(2)" :type="isMapMode?'':'primary'">{{$t("monitor.videoMode")}}</i-button>
                                </ButtonGroup>
                            </div>

                            <div style="float:left;height:35px; line-height:35px;padding-left:15px;" v-show="isShowVideoBtn && !isMapMode">
                                <!-- <i-button @click="videoBack" size="small" icon="md-refresh">{{$t("monitor.videoPlayback")}}</i-button> -->
                                <!-- <i-button @click="isShowYunTai=true" size="small" icon="ios-microphone-outline">{{$t("monitor.intercom")}}</i-button> -->

                                <button type="button" class="ivu-btn ivu-btn-default ivu-btn-small" style="border-radius:7px;" @click="videoBack">
                                    <i class="ivu-icon ivu-icon-md-refresh" ></i> 
                                    <span>{{$t("monitor.videoPlayback")}}</span>
                                </button>
                                <button type="button" class="ivu-btn ivu-btn-default ivu-btn-small" style="border-radius:7px;" @click="isShowYunTai=true">
                                    <i class="icon iconfont icon-duijiangji" style="font-size:12px"></i> 
                                    <span>{{$t("monitor.intercom")}}</span>  
                                </button>
                            </div>
                            <div style="float:left;height:35px; line-height:35px;padding-left:15px;color:red;font-size:12px;">{{intervalTime}}{{$t("monitor.refreshAfter")}}</div>
                            <!-- <div style="float:left;height:35px; line-height:35px;padding-left:5px;" v-show="isShowVideoBtn && !isMapMode">
                                <i-select v-model="codeStream" size="small">
                                    <i-option value="0">{{$t('videoSettings.mainStream')}}</i-option>
                                    <i-option value="1">{{$t('videoSettings.subStream')}}</i-option>
                                </i-select>
                            </div> -->
                            <ul class="ul-manager-wraper">
                                <li style="height:35px; line-height:35px;" v-show="isShowAreaCount">
                                    <span>{{areaName.join('/')}}</span>
                                    <span>运动:{{areaMovingCount}}</span>
                                    <span>静止:{{areaStaticCount}}</span>
                                    <span>离线:{{areaOfflineCount}}</span>
                                </li>
                                <li style="padding-top:6px;margin:0 0 0 10px;" v-if="isZh">
                                    <Poptip trigger="click" :title="$t('monitor.regionSelection')">
                                        <i-button size="small" style="border-radius:7px;"> {{$t("monitor.regionSelection")}} </i-button>
                                        <div slot="content" style="width:300px;padding:5px 0;">
                                            <div>
                                                <div>
                                                    <el-cascader :options="provinceList" v-model="areaAddress" clearable filterable style="width:100%;"></el-cascader>
                                                    <!-- <Cascader :data="provinceList" v-model="areaAddress" change-on-select filterable></Cascader> -->
                                                </div>
                                                <div style="padding-top:10px;">
                                                    <Row>
                                                        <i-Col span="12" style="padding-right:6.5px;">
                                                            <i-button type="primary" style="width:100%;" :loading="arealoading" @click="handleQueryArea"> {{$t("reportForm.query")}} </i-button>
                                                        </i-Col>
                                                        <i-Col span="12" style="padding-left:6.5px;">
                                                            <i-button type="error" style="width:100%;" @click="handleRemoveAreaOverlay"> {{$t("reportForm.clean")}} </i-button>
                                                        </i-Col>
                                                    </Row>
                                                </div>
                                            </div>
                                        </div>
                                    </Poptip>
                                </li>
                                <li style="padding-top:6px;" v-if="isZh">
                                    <i-button size="small" @click="echartsMapPage" style="border-radius:7px;"> {{$t("monitor.screenDisplay")}} </i-button>
                                </li>
                                <li class="full-map-wraper">
                                    <Icon @click.native="handleMapSizeChange" :type="isFullMap ?'md-contract':'md-expand'" size="23"></Icon>
                                </li>
                                <li class="gongju">
                                    <Dropdown transfer='click' @on-click="handleClickTools">
                                        <i-button type="primary" size="small" style="border-radius:7px;">
                                            {{$t("monitor.tools")}}
                                            <Icon type="ios-arrow-down"></Icon>
                                        </i-button>
                                        <i-dropdown-menu slot="list">
                                            <DropdownItem name="openDistance">
                                                <i class='icon iconfont icon-chizi' style='display:inline-block;width:16px:height:16px;margin-right:5px'></i>{{$t("monitor.ranging")}}
                                            </DropdownItem>
                                            <DropdownItem name="normal">
                                                <i class='icon iconfont icon-moren' style='display:inline-block;width:15px:height:15px;margin-right:5px;font-size:14px'></i>{{$t("monitor.defaultStyle")}}
                                            </DropdownItem>
                                            <DropdownItem name="midnight">
                                                <i class='icon iconfont icon-wuye' style='display:inline-block;width:16px:height:16px;margin-right:5px;font-size:14px'></i>{{$t("monitor.midnightBlue")}}
                                            </DropdownItem>
                                            <DropdownItem name="carName">
                                                <i class='ivu-icon ivu-icon-ios-car' style='display:inline-block;width:16px:height:16px;margin-right:5px;font-size:14px'></i>{{$t("monitor.showName")}}
                                            </DropdownItem>
                                            <DropdownItem name="mapCluster">
                                                <i class='ivu-icon ivu-icon-ios-aperture' style='display:inline-block;width:16px:height:16px;margin-right:5px;font-size:14px'></i>{{$t("monitor.mapcluster")}}
                                            </DropdownItem>
                                        </i-dropdown-menu>
                                    </Dropdown>
                                </li>
                            </ul>
                        </div>
                        <div id="my-map-wrap" :class="{ 'map-mode-cls': isMapMode, 'video-mode-cls': !isMapMode }" :style='{top:isMouseoverTop35?"10px":"35px"}'>
                            <div id="my-map"></div>
                            <div style="position: absolute; right: 10px; top: 10px;">
                                <selected-map :mapType="mapType" @select-map="onSelectMap" @switch-traffic="onSwitchTraffic"></selected-map>
                            </div>
                        </div>
                        <div id="video_wrap" :class="{ 'videos-wrapper-hide': isMapMode, 'videos-wrapper-show': !isMapMode }" :style='{top:isMouseoverTop35?"10px":"35px"}'>
                            <div class="video_header">
                                <div class="video_function">
                                    <span :title="$t('monitor.clearAllVideos')" @click="handleCleanAllVideos" style="color:#ffffff;"><i class="icon iconfont icon-custom-clear"></i></span>
                                    <span :title="$t('monitor.mute')" @click="handlePlayerMute" style="color:#ffffff;"><i class="icon iconfont" :class="{'icon-yinliang':!isMute,'icon-guanbiyinliang':isMute}"></i></span>
                                </div>
                                <div style="height: 100%;float:right;" class="tv_box">
                                    <span :title="$t('monitor.showAChannel')"><i class="icon icon_num1" @click="openAndCloseVideoWindows(1)"></i></span>
                                    <span :title="$t('monitor.showSecondChannel')"><i class="icon icon_num_er" @click="openAndCloseVideoWindows(2)"></i></span>
                                    <span :title="$t('monitor.showFourChannel')"><i class="icon icon_num2" @click="openAndCloseVideoWindows(4)"></i></span>
                                    <span :title="$t('monitor.showSixChannel')"><i class="icon icon_num3" @click="openAndCloseVideoWindows(6)"></i></span>
                                    <span :title="$t('monitor.showEightChannel')"><i class="icon icon_num4" @click="openAndCloseVideoWindows(8)"></i></span>
                                    <span :title="$t('monitor.showNineChannel')"><i class="icon icon_num5" @click="openAndCloseVideoWindows(9)"></i></span>
                                    <span :title="$t('monitor.showSixteenChannel')"><i class="icon icon_num6" @click="openAndCloseVideoWindows(16)"></i></span>
                                    <span @click="handlePlayAllVideos" :title="$t('monitor.playAllVideos')"><i class="icon icon_play_all"></i></span>
                                    <span id="box_stop" @click="handleStopAllVideos" :title="$t('monitor.stopAllVideos')"><i class="icon icon_close_show"></i></span>
                                </div>
                                <div style="float:right;height: 100%;line-height:35px">

                                </div>
                            </div>
                            <div class="video_body">
                                <div :class="videoContentCls" id="videoContent" ref="videoContent" v-if="isDestory">
                                    <div v-for="index in 16" :key="index" :data-id="index" :class="'vpw'+index" draggable="true" @dragstart="onDragstart($event)" @dragend="onDragend($event)" @dragover="onDragover($event)" @drop="onDrop($event)">
                                        <my-video :ref="'player' + index"></my-video>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <map-mark @on-select-fence="onSelectFence"></map-mark>

                        <div class="blackBoxSpeak" v-if="isLuyin">
                            <div class='img-box'>
                                <div>
                                    <img src="./images/luyin/ic_record@2x.png" alt="" style='width:100%;height:100%'>
                                </div>
                                <div>
                                    <img :src='imgSrc' style='width:100%;height:100%'>
                                </div>
                            </div>
                            <div class="blackBoxSpeakConent">{{$t('monitor.recordingTips')}}</div>
                        </div>

                        <transition name="el-zoom-in-bottom">
                            <div id="yuntai-tab-wrapper" v-show="isShowYunTai">
                                <div class='yuntai-title'>
                                    {{currentVideoDeviceInfo.deviceName}} - {{currentVideoDeviceInfo.deviceId}}
                                </div>
                                <Tabs :animated="false">
                                    <Tab-Pane :label="$t('monitor.voice')">
                                        <div class="listing_choice">
                                            <Radio-Group v-model="listingChoice">
                                                <Radio label="duijiang"><span>{{$t("monitor.intercom")}}</span></Radio>
                                                <Radio label="jianting"><span>{{$t("monitor.monitor")}}</span></Radio>
                                            </Radio-Group>
                                        </div>
                                        <div class="listing_box" v-if="listingChoice == 'duijiang'">
                                            <i class="icon_dj"></i>
                                            <div class="audioPlayerTip">{{audioPlayerTip}}</div>
                                            <div class="yt_footer">
                                                <div>
                                                    <i-button style="width:120px;" @click="openDuijiang" :loading="loading">{{isOpenDuijiang?$t("monitor.turnOff"):$t("monitor.turnOn")}}</i-button>
                                                </div>
                                                <div @mousedown="onMousedown" style="margin-top:10px;">
                                                    <i-button style="width:120px;">{{$t("monitor.repressSpeak")}}</i-button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="listing_box" v-else>
                                            <i class="icon_jt"></i>
                                            <div class="audioPlayerTip">{{audioPlayerTip}}</div>
                                            <div class="yt_footer">
                                                <div>
                                                    <i-button style="width:120px;" @click="openJianTing" :loading="loading">{{isOpenJianting?$t("monitor.close"):$t("monitor.open")}}</i-button>
                                                </div>
                                            </div>
                                        </div>
                                    </Tab-Pane>
                                    <Tab-Pane :label="$t('monitor.yuntai')">
                                        <div id="tab_state_1" class="tab_state_pane">
                                            <div class="state_1_yt" style="margin-left:15px">
                                                <div class="fl icon_yt_box">
                                                    <a class="icon_yt_0" title=""></a>
                                                    <a class="icon_yt_1" title=""></a>
                                                    <a class="icon_yt_2" title=""></a>
                                                    <a class="icon_yt_3" title=""></a>
                                                    <a class="icon_yt_4" title=""></a>
                                                    <a class="icon_yt_5" title=""></a>
                                                    <a class="icon_yt_6" title=""></a>
                                                    <a class="icon_yt_7" title=""></a>
                                                    <a class="icon_yt_8" title=""></a>
                                                    <div id="yt_handle" class="yt" style="margin:3px;">
                                                        <Slider></Slider>
                                                    </div>
                                                </div>
                                                <div class="fr yt_state2">
                                                    <span>
                                                        <a class="icon_f0_0" title=""></a>
                                                        <a class="icon_f0_1" title=""></a>
                                                    </span>
                                                    <span>
                                                        <a class="icon_y0_0" title=""></a>
                                                        <a class="icon_y0_1" title=""></a>
                                                    </span>
                                                    <span>
                                                        <a class="icon_k0_0" title=""></a>
                                                        <a class="icon_k0_1" title=""></a>
                                                    </span>
                                                    <span>
                                                        <a class="icon_light0_0" title=""></a>
                                                        <a class="icon_biao0_1" title=""></a>
                                                    </span>
                                                </div>
                                                <div class="spacer"></div>
                                            </div>
                                            <div class="yt_footer">
                                                <Row>
                                                    <i-Col span="6" style="padding: 0 5px;">
                                                        <Input-Number :max="1000" :min="1" style="width:60px;"></Input-Number>
                                                    </i-Col>
                                                    <i-Col span="6" style="padding: 0 5px;">
                                                        <i-button style="width:100%;">{{$t('monitor.call')}}</i-button>
                                                    </i-Col>
                                                    <i-Col span="6" style="padding: 0 5px;">
                                                        <i-button style="width:100%;">{{$t('monitor.setup')}}</i-button>
                                                    </i-Col>
                                                    <i-Col span="6" style="padding: 0 5px;">
                                                        <i-button style="width:100%;">{{$t('monitor.delete')}}</i-button>
                                                    </i-Col>
                                                </Row>
                                            </div>
                                        </div>
                                    </Tab-Pane>
                                    <Tab-Pane :label="$t('monitor.color')">
                                        <Row class="state_color">
                                            <i-Col span="6" style="line-height:35px;">
                                                <i class="state_co_0" :title="$t('monitor.luminance')"></i>
                                            </i-Col>
                                            <i-Col span="12">
                                                <Slider v-model="brightness" :min="0" :max="255"></Slider>
                                            </i-Col>
                                            <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                                <input v-model="brightness" name="" type="text">
                                            </i-Col>
                                        </Row>
                                        <Row class="state_color">
                                            <i-Col span="6" style="line-height:35px;">
                                                <i class="state_co_1" :title="$t('monitor.contrastRatio')"></i>
                                            </i-Col>
                                            <i-Col span="12">
                                                <Slider v-model="constract" :min="-127" :max="127"></Slider>
                                            </i-Col>
                                            <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                                <input v-model="constract" name="" type="text">
                                            </i-Col>
                                        </Row>
                                        <Row class="state_color">
                                            <i-Col span="6" style="line-height:35px;">
                                                <i class="state_co_2" :title="$t('monitor.chroma')"></i>
                                            </i-Col>
                                            <i-Col span="12">
                                                <Slider v-model="hue" :min="-127" :max="127"></Slider>
                                            </i-Col>
                                            <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                                <input v-model="hue" name="" type="text">
                                            </i-Col>
                                        </Row>
                                        <Row class="state_color">
                                            <i-Col span="6" style="line-height:35px;">
                                                <i class="state_co_3" :title="$t('monitor.saturation')"></i>
                                            </i-Col>
                                            <i-Col span="12">
                                                <Slider v-model="saturate" :min="0" :max="255"></Slider>
                                            </i-Col>
                                            <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                                <input v-model="saturate" name="" type="text">
                                            </i-Col>
                                        </Row>
                                        <Row class="state_color">
                                            <i-Col span="6" style="line-height:35px;">
                                                <i class="state_co_4" :title="$t('monitor.exposure')"></i>
                                            </i-Col>
                                            <i-Col span="12">
                                                <Slider v-model="exposure" :min="0" :max="255"></Slider>
                                            </i-Col>
                                            <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                                <input v-model="exposure" name="" type="text">
                                            </i-Col>
                                        </Row>
                                        <div class="yt_footer">
                                            <i-button style="width:120px;" @click="defaultQualityParams">{{$t('monitor.default')}}</i-button>
                                        </div>
                                    </Tab-Pane>

                                    <i-button @click="isShowYunTai=false" size="small" slot="extra" style="margin:5px 5px 0 0;">{{$t("monitor.close")}}</i-button>
                                </Tabs>
                                <div style="visibility: hidden;">
                                    <div id="audio-wrap">
                                        <video id="audio-player" style="display: none;"></video>
                                    </div>
                                </div>
                            </div>
                        </transition>
                        <!-- <div class="spin-wraper" v-if="isSpin" style="z-index:10">
                            <Spin fix size="large"></Spin>
                        </div> -->
                    </div>

                    <Modal v-model="setupVideoModal" width="800" :mask-closable="false">
                        <p slot="header" style="color:#f60;text-align:center">
                            <Icon type="ios-settings"></Icon>
                            <span>{{$t('monitor.videoSettings')}} - {{currentDeviceName}}</span>
                        </p>
                        <Tabs value="" :animated="false">
                            <Tab-Pane :label="$t('videoSettings.videoPlayParameter')" name="videoPlay">
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.transmissionMode')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                    <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                        <i-select v-model="videotranstype" style="width:300px">
                                            <i-option value="0">TCP</i-option>
                                            <i-option value="1">UDP</i-option>
                                        </i-select>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.realTime')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                    <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                        <i-select placement="top" v-model="videostreamtype" style="width:300px">
                                            <i-option value="0">{{$t('videoSettings.mainStream')}}</i-option>
                                            <i-option value="1">{{$t('videoSettings.subStream')}}</i-option>
                                        </i-select>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.videoCode')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                    <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                        <i-select v-model="manualvideocodec" style="width:300px">
                                            <i-option value="0">0-reserve</i-option>
                                            <i-option value="98">98-H264</i-option>
                                            <i-option value="99">99-H265</i-option>
                                        </i-select>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.intercomChannel')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                    <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                        <i-input v-model="audiochannel" style="width:300px"></i-input>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.talkAudioCodec')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                    <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                        <i-select v-model="talkaudiocodec" style="width:300px">
                                            <i-option value="0">0-reserve</i-option>
                                            <i-option value="1">1-Audio_G721</i-option>
                                            <i-option value="2">2-Audio_G722</i-option>
                                            <i-option value="3">3-Audio_G723</i-option>
                                            <i-option value="4">4-Audio_G728</i-option>
                                            <i-option value="5">5-Audio_G729</i-option>
                                            <i-option value="6">6-Audio_G711A</i-option>
                                            <i-option value="7">7-Audio_G711U</i-option>
                                            <i-option value="8">8-Audio_G726</i-option>
                                            <i-option value="9">9-Audio_G729A</i-option>
                                            <i-option value="10">10-Audio_DVI4_3</i-option>
                                            <i-option value="11">11-Audio_DVI4_4</i-option>
                                            <i-option value="12">12-Audio_DVI4_8K</i-option>
                                            <i-option value="13">13-Audio_DVI4_16K</i-option>
                                            <i-option value="14">14-Audio_LPC</i-option>
                                            <i-option value="15">15-Audio_S16BE_STEREO</i-option>
                                            <i-option value="16">16-Audio_S16BE_MONO</i-option>
                                            <i-option value="17">17-Audio_MPEGAUDIO</i-option>
                                            <i-option value="18">18-Audio_LPCM</i-option>
                                            <i-option value="19">19-Audio_AAC</i-option>
                                            <i-option value="20">20-Audio_WMA9STD</i-option>
                                            <i-option value="21">21-Audio_HEAAC</i-option>
                                            <i-option value="22">22-Audio_PCM_VOICE</i-option>
                                            <i-option value="23">23-Audio_PCM_AUDIO</i-option>
                                            <i-option value="24">24-Audio_AACLC</i-option>
                                            <i-option value="25">25-Audio_MP3</i-option>
                                            <i-option value="26">26-Audio_ADPCMA</i-option>
                                            <i-option value="27">27-Audio_MP4AUDIO</i-option>
                                            <i-option value="28">28-Audio_AMR</i-option>
                                            <i-option value="91">91-transport</i-option>
                                            <i-option value="98">98-Video_H264</i-option>
                                            <i-option value="99">99-Video_H265</i-option>
                                            <i-option value="100">100-Video_AVS</i-option>
                                            <i-option value="101">101-Video_SVAC</i-option>
                                            <i-option value="110">110-Audio_G726_32K</i-option>
                                            <i-option value="111">111-Audio_G726_40K</i-option>
                                            <i-option value="112">112-Audio_G726Be_32K</i-option>
                                            <i-option value="113">113-Audio_G726Be_40K</i-option>
                                        </i-select>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.liveplayAudioFormat')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                    <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                        <i-select v-model="realtimeaudiocodec" style="width:300px">
                                            <i-option value="0">0-reserve</i-option>
                                            <i-option value="1">1-Audio_G721</i-option>
                                            <i-option value="2">2-Audio_G722</i-option>
                                            <i-option value="3">3-Audio_G723</i-option>
                                            <i-option value="4">4-Audio_G728</i-option>
                                            <i-option value="5">5-Audio_G729</i-option>
                                            <i-option value="6">6-Audio_G711A</i-option>
                                            <i-option value="7">7-Audio_G711U</i-option>
                                            <i-option value="8">8-Audio_G726</i-option>
                                            <i-option value="9">9-Audio_G729A</i-option>
                                            <i-option value="10">10-Audio_DVI4_3</i-option>
                                            <i-option value="11">11-Audio_DVI4_4</i-option>
                                            <i-option value="12">12-Audio_DVI4_8K</i-option>
                                            <i-option value="13">13-Audio_DVI4_16K</i-option>
                                            <i-option value="14">14-Audio_LPC</i-option>
                                            <i-option value="15">15-Audio_S16BE_STEREO</i-option>
                                            <i-option value="16">16-Audio_S16BE_MONO</i-option>
                                            <i-option value="17">17-Audio_MPEGAUDIO</i-option>
                                            <i-option value="18">18-Audio_LPCM</i-option>
                                            <i-option value="19">19-Audio_AAC</i-option>
                                            <i-option value="20">20-Audio_WMA9STD</i-option>
                                            <i-option value="21">21-Audio_HEAAC</i-option>
                                            <i-option value="22">22-Audio_PCM_VOICE</i-option>
                                            <i-option value="23">23-Audio_PCM_AUDIO</i-option>
                                            <i-option value="24">24-Audio_AACLC</i-option>
                                            <i-option value="25">25-Audio_MP3</i-option>
                                            <i-option value="26">26-Audio_ADPCMA</i-option>
                                            <i-option value="27">27-Audio_MP4AUDIO</i-option>
                                            <i-option value="28">28-Audio_AMR</i-option>
                                            <i-option value="91">91-transport</i-option>
                                            <i-option value="98">98-Video_H264</i-option>
                                            <i-option value="99">99-Video_H265</i-option>
                                            <i-option value="100">100-Video_AVS</i-option>
                                            <i-option value="101">101-Video_SVAC</i-option>
                                            <i-option value="110">110-Audio_G726_32K</i-option>
                                            <i-option value="111">111-Audio_G726_40K</i-option>
                                            <i-option value="112">112-Audio_G726Be_32K</i-option>
                                            <i-option value="113">113-Audio_G726Be_40K</i-option>
                                        </i-select>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.playbackAudioFormat')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                    <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                        <i-select placement="top" v-model="historyaudiocodec" style="width:300px">
                                            <i-option value="0">0-reserve</i-option>
                                            <i-option value="1">1-Audio_G721</i-option>
                                            <i-option value="2">2-Audio_G722</i-option>
                                            <i-option value="3">3-Audio_G723</i-option>
                                            <i-option value="4">4-Audio_G728</i-option>
                                            <i-option value="5">5-Audio_G729</i-option>
                                            <i-option value="6">6-Audio_G711A</i-option>
                                            <i-option value="7">7-Audio_G711U</i-option>
                                            <i-option value="8">8-Audio_G726</i-option>
                                            <i-option value="9">9-Audio_G729A</i-option>
                                            <i-option value="10">10-Audio_DVI4_3</i-option>
                                            <i-option value="11">11-Audio_DVI4_4</i-option>
                                            <i-option value="12">12-Audio_DVI4_8K</i-option>
                                            <i-option value="13">13-Audio_DVI4_16K</i-option>
                                            <i-option value="14">14-Audio_LPC</i-option>
                                            <i-option value="15">15-Audio_S16BE_STEREO</i-option>
                                            <i-option value="16">16-Audio_S16BE_MONO</i-option>
                                            <i-option value="17">17-Audio_MPEGAUDIO</i-option>
                                            <i-option value="18">18-Audio_LPCM</i-option>
                                            <i-option value="19">19-Audio_AAC</i-option>
                                            <i-option value="20">20-Audio_WMA9STD</i-option>
                                            <i-option value="21">21-Audio_HEAAC</i-option>
                                            <i-option value="22">22-Audio_PCM_VOICE</i-option>
                                            <i-option value="23">23-Audio_PCM_AUDIO</i-option>
                                            <i-option value="24">24-Audio_AACLC</i-option>
                                            <i-option value="25">25-Audio_MP3</i-option>
                                            <i-option value="26">26-Audio_ADPCMA</i-option>
                                            <i-option value="27">27-Audio_MP4AUDIO</i-option>
                                            <i-option value="28">28-Audio_AMR</i-option>
                                            <i-option value="91">91-transport</i-option>
                                            <i-option value="98">98-Video_H264</i-option>
                                            <i-option value="99">99-Video_H265</i-option>
                                            <i-option value="100">100-Video_AVS</i-option>
                                            <i-option value="101">101-Video_SVAC</i-option>
                                            <i-option value="110">110-Audio_G726_32K</i-option>
                                            <i-option value="111">111-Audio_G726_40K</i-option>
                                            <i-option value="112">112-Audio_G726Be_32K</i-option>
                                            <i-option value="113">113-Audio_G726Be_40K</i-option>
                                        </i-select>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.specifyUploadFileName')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                    <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                        <Checkbox v-model="needuploadfilename"></Checkbox>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.videoTimestamp')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                    <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                        <i-select placement="top" v-model="videotimestamptype" style="width:300px">
                                            <i-option value="0">{{$t('videoSettings.deviceCalc')}}</i-option>
                                            <i-option value="1">{{$t('videoSettings.serverCalc')}}</i-option>
                                        </i-select>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.videoPlayNumber')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                    <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                        <Input-Number :max="8" :min="1" v-model="videochannelcount"></Input-Number>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="18" style="height: 100%;line-height:32px;text-align: center;">
                                        <i-button type='primary' @click='handleSetPlayParamter' :disabled="userType > 2" :loading="loading">{{$t('videoSettings.setVideoPlayParameter')}}</i-button>
                                        <i-button type="info" @click="queryVideoPlayParameters" style="width:130px;" :loading="loading">{{$t("reportForm.query")}}</i-button>
                                    </i-Col>
                                </Row>
                            </Tab-Pane>
                            <Tab-Pane :label="$t('videoSettings.audioAndVideoTerminalProperties')" name="videoProperty">
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="7" offset="7" style="height: 100%;line-height:32px;">
                                        <i-button @click="queryVideoProperty" style="width:120px;" type="primary" :loading="loading">{{$t("reportForm.query")}}</i-button>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;">
                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t('videoSettings.audioCodingMode')}} : &nbsp;</i-Col>
                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                        {{videoProperty.audiocodec}}
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;">
                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t('videoSettings.audioCodingModeCharacter')}} : &nbsp;</i-Col>
                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                        {{videoProperty.audiocodecstr}}
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;">
                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t('videoSettings.audioChannels')}} : &nbsp;</i-Col>
                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                        {{videoProperty.audiochannelcount}}
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;">
                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t('videoSettings.audioSamplingRate')}} : &nbsp;</i-Col>
                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                        {{videoProperty.audiosamplerate}}
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;">
                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t('videoSettings.audioSamplingBits')}} : &nbsp;</i-Col>
                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                        {{videoProperty.audiosamplebits}}
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;">
                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t('videoSettings.audioFrameLength')}} : &nbsp;</i-Col>
                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                        {{videoProperty.audioframelength}}
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;">
                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t('videoSettings.audioOutputSupported')}} : &nbsp;</i-Col>
                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                        {{videoProperty.audiooutputsupport}}
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;">
                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t('videoSettings.videoCoding')}} : &nbsp;</i-Col>
                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                        {{videoProperty.videocodec}}
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;">
                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t('videoSettings.videoCodingModeCharacter')}} : &nbsp;</i-Col>
                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                        {{videoProperty.videocodecstr}}
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;">
                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t('videoSettings.maxAudioChannels')}} : &nbsp;</i-Col>
                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                        {{videoProperty.audiomaxsupport}}
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;">
                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">{{$t('videoSettings.maxVideoChannels')}} : &nbsp;</i-Col>
                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                        {{videoProperty.videomaxsupport}}
                                    </i-Col>
                                </Row>
                            </Tab-Pane>
                            <Tab-Pane :label="$t('videoSettings.audioAndVideoParameter')" name="videoSetup">
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="24" style="height: 100%;line-height:32px;text-align: right;">
                                        <i-button type="success" @click="defaultClientParameters">{{$t('videoSettings.defaultParameters')}}</i-button>
                                        <i-button type="info" @click="queryClientParameters" :loading="loading">{{$t("reportForm.query")}}</i-button>
                                        <i-button type="primary" @click="setClientParameters" :disabled="userType > 2">{{$t('videoSettings.send')}}</i-button>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="4" style="height: 100%;line-height:32px;text-align:right;">
                                        {{$t('videoSettings.realTimeStreamCodingMode')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                        :
                                    </i-Col>
                                    <i-Col span="7" style="height: 100%;line-height:32px;">
                                        <i-select v-model="realtimebitratemode">
                                            <i-option value="0">{{$t('videoSettings.CBR')}}</i-option>
                                            <i-option value="1">{{$t('videoSettings.VBR')}}</i-option>
                                            <i-option value="2">{{$t('videoSettings.ABR')}}</i-option>
                                        </i-select>
                                    </i-Col>
                                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.storageStreamEncodingMode')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                        :
                                    </i-Col>
                                    <i-Col span="7" style="height: 100%;line-height:32px;">
                                        <i-select v-model="storebitratemode">
                                            <i-option value="0">{{$t('videoSettings.CBR')}}</i-option>
                                            <i-option value="1">{{$t('videoSettings.VBR')}}</i-option>
                                            <i-option value="2">{{$t('videoSettings.ABR')}}</i-option>
                                        </i-select>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.realTimeStreamResolution')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                        :
                                    </i-Col>
                                    <i-Col span="7" style="height: 100%;line-height:32px;">
                                        <i-select v-model="realtimeresolution">
                                            <i-option value="0">QCIF</i-option>
                                            <i-option value="1">CIF</i-option>
                                            <i-option value="2">WCIF</i-option>
                                            <i-option value="3">D1</i-option>
                                            <i-option value="4">WD1</i-option>
                                            <i-option value="5">720p</i-option>
                                            <i-option value="6">1080p</i-option>
                                        </i-select>
                                    </i-Col>
                                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.storageStreamResolution')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                        :
                                    </i-Col>
                                    <i-Col span="7" style="height: 100%;line-height:32px;">
                                        <i-select v-model="storeresolution">
                                            <i-option value="0">QCIF</i-option>
                                            <i-option value="1">CIF</i-option>
                                            <i-option value="2">WCIF</i-option>
                                            <i-option value="3">D1</i-option>
                                            <i-option value="4">WD1</i-option>
                                            <i-option value="5">720p</i-option>
                                            <i-option value="6">1080p</i-option>
                                        </i-select>
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.realTimeStreamKeyframeInterval')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                        :
                                    </i-Col>
                                    <i-Col span="7" style="height: 100%;line-height:32px;">
                                        <Input-Number :max="1000" :min="1" v-model="realtimekeyframeinterval"></Input-Number>
                                        {{$t('videoSettings.range')}}1~1000
                                    </i-Col>
                                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.saveStreamKeyframeInterval')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                        :
                                    </i-Col>
                                    <i-Col span="7" style="height: 100%;line-height:32px;">
                                        <Input-Number :max="1000" :min="1" v-model="storekeyframeinterval"></Input-Number>
                                        {{$t('videoSettings.range')}}1~1000
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.realTimeStreamTargetFrameRate')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                        :
                                    </i-Col>
                                    <i-Col span="7" style="height: 100%;line-height:32px;">
                                        <Input-Number :max="120" :min="1" v-model="realtimeframerate"></Input-Number>
                                        {{$t('videoSettings.range')}}1~120 {{$t('videoSettings.frames_sec')}}
                                    </i-Col>
                                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.storageStreamTargetFrameRate')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                        :
                                    </i-Col>
                                    <i-Col span="7" style="height: 100%;line-height:32px;">
                                        <Input-Number :max="120" :min="1" v-model="storeframerate"></Input-Number>
                                        {{$t('videoSettings.range')}}1~120 {{$t('videoSettings.frames_sec')}}
                                    </i-Col>
                                </Row>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.realTimeStreamTargetBitRate')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                        :
                                    </i-Col>
                                    <i-Col span="7" style="height: 100%;line-height:32px;">
                                        <Input-Number :max="5000" :min="1" v-model="realtimeframebitrate"></Input-Number>
                                        kbps
                                    </i-Col>
                                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.targetBitRateOfMemoryStream')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                        :
                                    </i-Col>
                                    <i-Col span="7" style="height: 100%;line-height:32px;">
                                        <Input-Number :max="5000" :min="1" v-model="storeframebitrate"></Input-Number>
                                        kbps
                                    </i-Col>
                                </Row>
                                <hr/>
                                <fieldset class="layui-elem-field fieldset" style="margin-top:5px;padding-left: 10px;">
                                    <legend style="margin-left:20px;">{{$t('videoSettings.osd')}}</legend>
                                    <Row style="height:32px;margin: 10px 0;">
                                        <i-Col span="24" style="height: 100%;line-height:32px;">
                                            <checkbox-group v-model="videoCheckboxGroup">
                                                <Checkbox label="dateandtime">
                                                    <span>{{$t('videoSettings.dateAndTime')}}</span>
                                                </Checkbox>
                                                <Checkbox label="carnum">
                                                    <span>{{$t('videoSettings.licensePlate')}}</span>
                                                </Checkbox>
                                                <Checkbox label="channel">
                                                    <span>{{$t('videoSettings.logicalChannel')}}</span>
                                                </Checkbox>
                                                <Checkbox label="latlon">
                                                    <span>{{$t('videoSettings.longitudeAndLatitude')}}</span>
                                                </Checkbox>
                                                <Checkbox label="recorderspeed">
                                                    <span>{{$t('videoSettings.drivingRecordSpeed')}}</span>
                                                </Checkbox>
                                                <Checkbox label="gpsspeed">
                                                    <span>{{$t('videoSettings.satellitePositioningSpeed')}}</span>
                                                </Checkbox>
                                                <Checkbox label="drivingtime">
                                                    <span>{{$t('videoSettings.continuousDrivingTime')}}</span>
                                                </Checkbox>
                                            </checkbox-group>
                                        </i-Col>
                                    </Row>
                                </fieldset>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                        {{$t('videoSettings.enableAudioOutput')}}
                                    </i-Col>
                                    <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                        :
                                    </i-Col>
                                    <i-Col span="7" style="height: 100%;line-height:32px;">
                                        <i-select placement="top" v-model="usingaudio">
                                            <i-option value="1">{{$t('videoSettings.enable')}}</i-option>
                                            <i-option value="0">{{$t('videoSettings.disabled')}}</i-option>
                                        </i-select>
                                    </i-Col>
                                </Row>
                            </Tab-Pane>
                            <Tab-Pane :label="$t('videoSettings.singleChannelVideoParameters')" name="aloneVideoSetup">
                                <i-button type="info" @click="querySingleAudioVideoParameters" style="width:180px;margin-bottom:10px;" :loading="loading">{{$t("reportForm.query")}}</i-button>
                                <Tabs value="" :animated="false" type="card">
                                    <Tab-Pane :label="item.channelnum" v-for="(item,index) in channelsData" :key="index">
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                {{$t('videoSettings.realTimeStreamCodingMode')}} :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <i-select v-model="item.realtimebitratemode">
                                                    <i-option value="0">{{$t('videoSettings.CBR')}}</i-option>
                                                    <i-option value="1">{{$t('videoSettings.VBR')}}</i-option>
                                                    <i-option value="2">{{$t('videoSettings.ABR')}}</i-option>
                                                </i-select>
                                            </i-Col>
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                {{$t('videoSettings.storageStreamEncodingMode')}} :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <i-select v-model="item.storebitratemode">
                                                    <i-option value="0">{{$t('videoSettings.CBR')}}</i-option>
                                                    <i-option value="1">{{$t('videoSettings.VBR')}}</i-option>
                                                    <i-option value="2">{{$t('videoSettings.ABR')}}</i-option>
                                                </i-select>
                                            </i-Col>
                                        </Row>
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                {{$t('videoSettings.realTimeStreamResolution')}} :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <i-select v-model="item.realtimeresolution">
                                                    <i-option value="0">QCIF</i-option>
                                                    <i-option value="1">CIF</i-option>
                                                    <i-option value="2">WCIF</i-option>
                                                    <i-option value="3">D1</i-option>
                                                    <i-option value="4">WD1</i-option>
                                                    <i-option value="5">720p</i-option>
                                                    <i-option value="6">1080p</i-option>
                                                </i-select>
                                            </i-Col>
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                {{$t('videoSettings.storageStreamResolution')}} :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <i-select v-model="item.storeresolution">
                                                    <i-option value="0">QCIF</i-option>
                                                    <i-option value="1">CIF</i-option>
                                                    <i-option value="2">WCIF</i-option>
                                                    <i-option value="3">D1</i-option>
                                                    <i-option value="4">WD1</i-option>
                                                    <i-option value="5">720p</i-option>
                                                    <i-option value="6">1080p</i-option>
                                                </i-select>
                                            </i-Col>
                                        </Row>
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                {{$t('videoSettings.realTimeStreamKeyframeInterval')}} :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <Input-Number :max="1000" :min="1" v-model="item.realtimekeyframeinterval"></Input-Number>
                                                {{$t('videoSettings.range')}}1~1000
                                            </i-Col>
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                {{$t('videoSettings.saveStreamKeyframeInterval')}} :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <Input-Number :max="1000" :min="1" v-model="item.storekeyframeinterval"></Input-Number>
                                                {{$t('videoSettings.range')}}1~1000
                                            </i-Col>
                                        </Row>
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                {{$t('videoSettings.realTimeStreamTargetFrameRate')}} :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <Input-Number :max="120" :min="1" v-model="item.realtimeframerate"></Input-Number>
                                                {{$t('videoSettings.range')}}1~120 {{$t('videoSettings.frames_sec')}}
                                            </i-Col>
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                {{$t('videoSettings.storageStreamTargetFrameRate')}} :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <Input-Number :max="120" :min="1" v-model="item.storeframerate"></Input-Number>
                                                {{$t('videoSettings.range')}}1~120 {{$t('videoSettings.frames_sec')}}
                                            </i-Col>
                                        </Row>
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                {{$t('videoSettings.realTimeStreamTargetBitRate')}} :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <Input-Number :max="2000" :min="1" v-model="item.realtimeframebitrate"></Input-Number>
                                                kbps
                                            </i-Col>
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                {{$t('videoSettings.targetBitRateOfMemoryStream')}} :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <Input-Number :max="2000" :min="1" v-model="item.storeframebitrate"></Input-Number>
                                                kbps
                                            </i-Col>
                                        </Row>
                                        <hr/>
                                        <fieldset class="layui-elem-field fieldset" style="margin-top:5px;padding-left: 10px;">
                                            <legend style="margin-left:20px;">{{$t('videoSettings.osd')}}</legend>
                                            <Row style="height:32px;margin: 10px 0;">
                                                <i-Col span="24" style="height: 100%;line-height:32px;">
                                                    <checkbox-group v-model="item.videoCheckboxGroup">
                                                        <Checkbox label="dateandtime">
                                                            <span>{{$t('videoSettings.dateAndTime')}}</span>
                                                        </Checkbox>
                                                        <Checkbox label="carnum">
                                                            <span>{{$t('videoSettings.licensePlate')}}</span>
                                                        </Checkbox>
                                                        <Checkbox label="channel">
                                                            <span>{{$t('videoSettings.logicalChannel')}}</span>
                                                        </Checkbox>
                                                        <Checkbox label="latlon">
                                                            <span>{{$t('videoSettings.longitudeAndLatitude')}}</span>
                                                        </Checkbox>
                                                        <Checkbox label="recorderspeed">
                                                            <span>{{$t('videoSettings.drivingRecordSpeed')}}</span>
                                                        </Checkbox>
                                                        <Checkbox label="gpsspeed">
                                                            <span>{{$t('videoSettings.satellitePositioningSpeed')}}</span>
                                                        </Checkbox>
                                                        <Checkbox label="drivingtime">
                                                            <span>{{$t('videoSettings.continuousDrivingTime')}}</span>
                                                        </Checkbox>
                                                    </checkbox-group>
                                                </i-Col>
                                            </Row>
                                        </fieldset>
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="24" style="height:100%;line-height:32px;text-align:center;">
                                                <i-button style="width:200px;" type="primary" @click="setSingleAudioVideoParameters(index)">{{$t('videoSettings.send')}}</i-button>
                                            </i-Col>
                                        </Row>
                                    </Tab-Pane>
                                </Tabs>
                            </Tab-Pane>
                            <Tab-Pane :label="$t('videoSettings.audioAndVideoChannelList')" name="videoChannelsList">
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="7" offset="7" style="height: 100%;line-height:32px;">
                                        <i-button @click="queryVideoChannels" style="width:120px;" type="primary" :loading="loading">{{$t("reportForm.query")}}</i-button>
                                    </i-Col>
                                </Row>
                                <i-table border :columns="videoChannelsColumns" :data="videoChannelsTableData" height="234"></i-table>
                            </Tab-Pane>
                            <Tab-Pane :label="$t('videoSettings.activeSafetyPeripheral')" name="activeSecurityPeripheral">
                                <Tabs type="card" :animated="false">
                                    <Tab-Pane :label="$t('videoSettings.advancedDrivingAIDS')" name="activeSecurityPeripheral1">
                                        <Row>
                                            <i-col span="6">
                                                <i-button type="primary" @click="queryActiveSafetyDeviceInfo('adas')" :loading="loading">{{$t("reportForm.query")}}</i-button>
                                            </i-col>
                                        </Row>
                                        <Row style="line-height:32px">
                                            <i-col :span="3">
                                                {{$t('videoSettings.corporateName')}}:
                                            </i-col>
                                            <i-col :span="8">
                                                <i-input v-model.trim="safetyDeviceAdas.companyname" disabled style="color:#000"></i-input>
                                            </i-col>
                                            <i-col span="3" offset="2">
                                                {{$t('videoSettings.productModel')}}:
                                            </i-col>
                                            <i-col :span="8">
                                                <i-input v-model.trim="safetyDeviceAdas.modelname" disabled style="color:#000"></i-input>
                                            </i-col>
                                        </Row>
                                        <Row style="line-height:32px">
                                            <i-col span="3">
                                                {{$t('videoSettings.deviceVersion')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceAdas.hardwareversion" disabled></i-input>
                                            </i-col>
                                            <i-col span="3" offset="2">
                                                {{$t('videoSettings.softwareVersion')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceAdas.softwareversion" disabled></i-input>
                                            </i-col>
                                        </Row>
                                        <Row style="line-height:32px">
                                            <i-col span="3">
                                                {{$t('videoSettings.deviceID')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceAdas.exdeviceid" disabled></i-input>
                                            </i-col>
                                            <i-col span="3" offset="2">
                                                {{$t('videoSettings.customerCode')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceAdas.customcode" disabled></i-input>
                                            </i-col>
                                        </Row>
                                    </Tab-Pane>
                                    <Tab-Pane :label="$t('videoSettings.driverConditionMonitoring')" name="activeSecurityPeripheral2">
                                        <row>
                                            <i-col span="6">
                                                <i-button type="primary" @click="queryActiveSafetyDeviceInfo('dsm')" :loading="loading">{{$t("reportForm.query")}}</i-button>
                                            </i-col>
                                        </row>
                                        <Row style="line-height:32px">
                                            <i-col span="3">
                                                {{$t('videoSettings.corporateName')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceDsm.companyname" disabled></i-input>
                                            </i-col>
                                            <i-col span="3" offset="2">
                                                {{$t('videoSettings.productModel')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceDsm.modelname" disabled></i-input>
                                            </i-col>
                                        </Row>
                                        <Row style="line-height:32px">
                                            <i-col span="3">
                                                {{$t('videoSettings.deviceVersion')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceDsm.hardwareversion" disabled></i-input>
                                            </i-col>
                                            <i-col span="3" offset="2">
                                                {{$t('videoSettings.softwareVersion')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceDsm.softwareversion" disabled></i-input>
                                            </i-col>
                                        </Row>
                                        <Row style="line-height:32px">
                                            <i-col span="3">
                                                {{$t('videoSettings.deviceID')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceDsm.exdeviceid" disabled></i-input>
                                            </i-col>
                                            <i-col span="3" offset="2">
                                                {{$t('videoSettings.customerCode')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceDsm.customcode" disabled></i-input>
                                            </i-col>
                                        </Row>
                                    </Tab-Pane>
                                    <Tab-Pane :label="$t('videoSettings.tpms')" name="activeSecurityPeripheral3">
                                        <row>
                                            <i-col span="6">
                                                <i-button type="primary" @click="queryActiveSafetyDeviceInfo('tpms')" :loading="loading">{{$t("reportForm.query")}}</i-button>
                                            </i-col>
                                        </row>
                                        <Row style="line-height:32px">
                                            <i-col span="3">
                                                {{$t('videoSettings.corporateName')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceTpms.companyname" disabled></i-input>
                                            </i-col>
                                            <i-col span="3" offset="2">
                                                {{$t('videoSettings.productModel')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceTpms.modelname" disabled></i-input>
                                            </i-col>
                                        </Row>
                                        <Row style="line-height:32px">
                                            <i-col span="3">
                                                {{$t('videoSettings.deviceVersion')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceTpms.hardwareversion" disabled></i-input>
                                            </i-col>
                                            <i-col span="3" offset="2">
                                                {{$t('videoSettings.softwareVersion')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceTpms.softwareversion" disabled></i-input>
                                            </i-col>
                                        </Row>
                                        <Row style="line-height:32px">
                                            <i-col span="3">
                                                {{$t('videoSettings.deviceID')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceTpms.exdeviceid" disabled></i-input>
                                            </i-col>
                                            <i-col span="3" offset="2">
                                                {{$t('videoSettings.customerCode')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceTpms.customcode" disabled></i-input>
                                            </i-col>
                                        </Row>
                                    </Tab-Pane>
                                    <Tab-Pane :label="$t('videoSettings.blindspotMonitoring')" name="activeSecurityPeripheral4">
                                        <row>
                                            <i-col span="6">
                                                <i-button type="primary" @click="queryActiveSafetyDeviceInfo('bsd')" :loading="loading">{{$t("reportForm.query")}}</i-button>
                                            </i-col>
                                        </row>
                                        <Row style="line-height:32px;">
                                            <i-col span="3">
                                                {{$t('videoSettings.corporateName')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceBsd.companyname" disabled></i-input>
                                            </i-col>
                                            <i-col span="3" offset="2">
                                                {{$t('videoSettings.productModel')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceBsd.modelname" disabled></i-input>
                                            </i-col>
                                        </Row>
                                        <Row style="line-height:32px">
                                            <i-col span="3">
                                                {{$t('videoSettings.deviceVersion')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceBsd.hardwareversion" disabled></i-input>
                                            </i-col>
                                            <i-col span="3" offset="2">
                                                {{$t('videoSettings.softwareVersion')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceBsd.softwareversion" disabled></i-input>
                                            </i-col>
                                        </Row>
                                        <Row style="line-height:32px">
                                            <i-col span="3">
                                                {{$t('videoSettings.deviceID')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceBsd.exdeviceid" disabled></i-input>
                                            </i-col>
                                            <i-col span="3" offset="2">
                                                {{$t('videoSettings.customerCode')}}:
                                            </i-col>
                                            <i-col span="8">
                                                <i-input v-model.trim="safetyDeviceBsd.customcode" disabled></i-input>
                                            </i-col>
                                        </Row>
                                    </Tab-Pane>
                                </Tabs>
                            </Tab-Pane>
                        </Tabs>
                        <div slot="footer" style="padding:10px;"></div>
                    </Modal>
                    <!-- 编辑设备模态 -->
                    <Modal v-model="editDevModal" width="500">
                        <p slot="header" style="color:#f60;text-align:center">
                            <Icon type="ios-create-outline"></Icon>
                            <span>{{$t("monitor.editDev")}}</span>
                        </p>
                        <div style="text-align:center">
                            <Row style="margin: 10px 0">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("alarm.devNum")}} : &nbsp;</i-col>
                                <i-col span="16" style="height: 100%;text-align:left;line-height:32px;">
                                    {{currentDeviceId}}
                                    <span onclick="copyToClipboard()">
                                    <Icon type="ios-copy-outline" size="24" style="cursor: pointer;"></Icon>
                                </span>
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("monitor.devName")}} : &nbsp;</i-col>
                                <i-col span="16">
                                    <i-input v-model.trim="editDevData.devicename" :disabled="editDevData.disabled"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("monitor.loginName")}} : &nbsp;</i-col>
                                <i-col span="16">
                                    <i-input v-model.trim="editDevData.loginname"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("monitor.phoneNumber")}} : &nbsp;</i-col>
                                <i-col span="16">
                                    <i-input v-model.trim="editDevData.simnum" :disabled="editDevData.disabled"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("bgMgr.expirenotifytime")}} : &nbsp;</i-col>
                                <i-col span="16">
                                    <date-picker type="date" v-model="expirenotifytime" style="width:100%" :disabled="editDevData.disabled"></date-picker>
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("reportForm.posiType")}} : &nbsp;</i-col>
                                <i-col span="16" style="text-align:left;line-height:32px;">
                                    <CheckboxGroup v-model="editDevData.needloctypeArr">
                                        <Checkbox label="gps">
                                            <span>GPS</span>
                                        </Checkbox>
                                        <Checkbox label="lbs">
                                            <span>LBS</span>
                                        </Checkbox>
                                        <Checkbox label="wifi">
                                            <span>WiFi</span>
                                        </Checkbox>
                                    </CheckboxGroup>
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("monitor.remarks")}} : &nbsp;</i-col>
                                <i-col span="16">
                                    <i-input v-model.trim="editDevData.remark" type="textarea" :rows="4" :disabled="editDevData.disabled"></i-input>
                                </i-col>
                            </Row>
                        </div>
                        <div slot="footer">
                            <i-button type="primary" @click="handleEditDevFn" style="width: 100%" :disabled="editDevData.disabled">{{$t("monitor.confirm")}}</i-button>
                        </div>
                    </Modal>

                    <!-- 下发指令模态 -->
                    <Modal v-model="dispatchDirectiveModal" width="560" :mask-closable="false">
                        <p slot="header" style="color:#f60;text-align:center">
                            <Icon type="ios-create-outline"></Icon>
                            <span>{{ selectedCmdInfo.cmdName }}</span>
                        </p>

                        <div style="text-align:center">
                            <Row style="margin: 10px 0">
                                <i-col span="24" style="height: 100%;text-align:center;line-height:32px;font-size:14px;">{{selectedCmdInfo.cmddescr}}</i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-if="selectedCmdInfo.type === 'list'">
                                <i-col :offset="4" span="16">
                                    <i-select v-model="selectedTypeVal">
                                        <i-option v-for="item in selectedCmdInfo.params" :value="item.type" :key="item.type">{{ item.value }}</i-option>
                                    </i-select>
                                </i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'text'">
                                <i-col span="6" style="height: 100%;text-align:right;line-height:32px;">{{item.desc}} : &nbsp;</i-col>
                                <i-col span="16">
                                    <i-input v-model.trim="cmdParams[item.type]"></i-input>
                                </i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'timeperiod'">
                                <i-col span="6" style="height: 100%;text-align:right;line-height:32px;">{{item.desc}} : &nbsp;</i-col>
                                <i-col span="16">
                                    <Time-Picker format="HH:mm" type="timerange" placeholder="选择时间段" v-model="cmdParams[item.type]"></Time-Picker>
                                </i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'remind'">
                                <i-col span="3" style="height: 100%;text-align:right;line-height:32px;">{{item.desc}} : &nbsp;</i-col>
                                <i-col span="18">
                                    <Row>
                                        <i-col span="16">
                                            <Time-Picker format="HH:mm" placeholder="选择时间" v-model="cmdParams[item.type].time"></Time-Picker>
                                        </i-col>
                                        <i-col span="8" style="height: 100%;line-height:32px;">
                                            <i-switch v-model="cmdParams[item.type].switch" />
                                        </i-col>
                                    </Row>
                                    <Row style="margin: 10px 0">
                                        <i-col span="16">
                                            <Radio-Group v-model="cmdParams[item.type].type">
                                                <Radio label="1"> <span>一次</span></Radio>
                                                <Radio label="2"> <span>每天</span></Radio>
                                                <Radio label="3"><span>每周</span></Radio>
                                            </Radio-Group>
                                        </i-col>
                                    </Row>
                                    <Row style="margin: 10px 0" v-if="cmdParams[item.type].type === '3' ">
                                        <i-col span="24">
                                            <CheckboxGroup v-model="cmdParams[item.type].weekselected">
                                                <Checkbox label="一"><span>一</span></Checkbox>
                                                <Checkbox label="二"><span>二</span></Checkbox>
                                                <Checkbox label="三"><span>三</span></Checkbox>
                                                <Checkbox label="四"><span>四</span></Checkbox>
                                                <Checkbox label="五"><span>五</span></Checkbox>
                                                <Checkbox label="六"><span>六</span></Checkbox>
                                                <Checkbox label="日"><span>日</span></Checkbox>
                                            </CheckboxGroup>
                                        </i-col>
                                    </Row>
                                </i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'time'">
                                <i-col span="6" style="height: 100%;text-align:right;line-height:32px;">{{item.desc}} : &nbsp;</i-col>
                                <i-col span="16">
                                    <Time-Picker format="HH:mm" type="time" placeholder="选择时间" v-model="cmdParams[item.type]"></Time-Picker>
                                </i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'weektime'">
                                <i-col span="3" style="height: 100%;text-align:right;line-height:32px;">
                                    <Row style="margin: 10px 0">
                                        <i-col span="24">
                                            {{item.desc}} : &nbsp;
                                        </i-col>
                                    </Row>
                                </i-col>
                                <i-col span="18">
                                    <Row style="margin: 10px 0">
                                        <i-col span="24">
                                            <Time-Picker format="HH:mm" type="time" placeholder="选择时间" v-model="cmdParams[item.type].time"></Time-Picker>
                                        </i-col>
                                    </Row>
                                    <Row style="margin: 10px 0">
                                        <i-col span="24">
                                            <CheckboxGroup v-model="cmdParams[item.type].weekselected">
                                                <Checkbox label="一"><span>一</span></Checkbox>
                                                <Checkbox label="二"><span>二</span></Checkbox>
                                                <Checkbox label="三"><span>三</span></Checkbox>
                                                <Checkbox label="四"><span>四</span></Checkbox>
                                                <Checkbox label="五"><span>五</span></Checkbox>
                                                <Checkbox label="六"><span>六</span></Checkbox>
                                                <Checkbox label="日"><span>日</span></Checkbox>
                                            </CheckboxGroup>
                                        </i-col>
                                    </Row>
                                </i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'weekperiod'">
                                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">
                                    <Row style="margin: 10px 0">
                                        <i-col span="24">
                                            {{item.desc}} : &nbsp;
                                        </i-col>
                                    </Row>
                                </i-col>
                                <i-col span="20">
                                    <Row style="margin: 10px 0" v-if="item.type=='week'">
                                        <i-col span="24">
                                            <Checkbox-Group v-model="cmdParams[item.type]">
                                                <Checkbox label="一"><span>一</span></Checkbox>
                                                <Checkbox label="二"><span>二</span></Checkbox>
                                                <Checkbox label="三"><span>三</span></Checkbox>
                                                <Checkbox label="四"><span>四</span></Checkbox>
                                                <Checkbox label="五"><span>五</span></Checkbox>
                                                <Checkbox label="六"><span>六</span></Checkbox>
                                                <Checkbox label="日"><span>日</span></Checkbox>
                                            </Checkbox-Group>
                                        </i-col>
                                    </Row>
                                    <Row style="margin: 10px 0" v-else>
                                        <i-col span="20">
                                            {{item.title}} &nbsp;
                                            <Time-Picker format="HH:mm" v-model="cmdParams[item.type]" type="timerange" placeholder="选择时间段"></Time-Picker>
                                        </i-col>
                                    </Row>
                                </i-col>
                            </Row>


                            <Row style="margin: 10px 0" v-show="selectedCmdInfo.cmdpwd">
                                <i-col span="6" style="height: 100%;text-align:right;line-height:32px;">{{$t("bgMgr.pwd")}} : &nbsp;</i-col>
                                <i-col span="16">
                                    <i-input v-model.trim="cmdPwd" style="width:100%;"></i-input>
                                </i-col>
                            </Row>
                        </div>
                        <div slot="footer">
                            <i-button type="primary" @click="disposeDirectiveFn" style="width: 100%">{{$t("videoSettings.send")}}</i-button>
                        </div>
                    </Modal>

                    <!-- 设备基本信息模态 -->
                    <Modal v-model="deviceInfoModal" width="500">
                        <p slot="header" style="color:#f60;text-align:center">
                            <Icon type="ios-create-outline"></Icon>
                            <span>{{$t("monitor.devBaseInfo")}} - {{ currentDeviceName }}</span>
                        </p>
                        <Tabs v-model="deviceBaseTabs" :animated="false">
                            <TabPane :label="$t('monitor.property')" name="property">
                                <div style="text-align:center" style="height:430px">
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.customer")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.creater}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.groupName")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.groupname}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.devNumber")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.deviceid}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.devName")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.devicename}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.platformType")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.deviceTypeStr}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.factoryNum")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.manufactureid}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.clientType")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.terminalmodelno}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.terminalNumber")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.terminalid}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.hardwareVersion")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.hardwareversion}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.firmwareVersion")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.firmwareversion}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.expireTime")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{ deviceBaseInfo.isfree==6 ? $t("charge.freelife") : deviceBaseInfo.overdueDateStr }}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.plateno")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.plateno}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("reportForm.vinno")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.vin}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">{{$t("monitor.phoneNumber")}} : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.simnum}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">IMEI : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.imei}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">IMSI : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.simimsi}}
                                        </i-col>
                                    </Row>
                                    <Row>
                                        <i-col span="5" style="height: 100%;text-align:right;line-height:25px;">ICCID : &nbsp;</i-col>
                                        <i-col span="16" style="height: 100%;line-height:25px;text-align:left;">
                                            {{deviceBaseInfo.simiccid}}
                                        </i-col>
                                    </Row>
                                </div>
                            </TabPane>
                            <TabPane :label="$t('monitor.parameter')" name="parameter">
                                <i-input v-model="deviceBaseParameter" :autosize="{ minRows: 20, maxRows: 20 }" :placeholder="$t('monitor.parameterPlaceholder')" type="textarea" readonly />
                            </TabPane>
                        </Tabs>

                        <div slot="footer" style="text-align:center;">
                            <i-button type="primary" @click="queryDeviceBaseInfo(1)" :loading="loading" style="width: 200px">{{$t('monitor.queryProperty')}}</i-button>
                            <i-button type="primary" @click="queryDeviceBaseInfo(3)" :loading="deviceParameterLoading" style="width: 200px">{{$t('monitor.queryParameter')}}</i-button>
                        </div>
                    </Modal>


                    <Modal v-model="ownerInfoModal" width="530">
                        <p slot="header" style="color:#f60;text-align:center">
                            <Icon type="ios-create-outline"></Icon>
                            <span>{{$t("monitor.ownerInfo")}}</span>
                        </p>
                        <div style="text-align:center">
                            <Row style="margin:10px 0;">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("alarm.devNum")}} : &nbsp;</i-col>
                                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                    {{ownerInfoData.deviceid}}
                                </i-col>
                            </Row>
                            <Row style="margin:10px 0;">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("insure.ownerName")}} : &nbsp;</i-col>
                                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                    <i-input v-model.trim="ownerInfoData.ownername" style="width: 100%;"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin:10px 0;">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.contact2")}} : &nbsp;</i-col>
                                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                    <i-input v-model.trim="ownerInfoData.phonenum1" style="width: 100%;"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin:10px 0;">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.contact2")}} : &nbsp;</i-col>
                                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                    <i-input v-model.trim="ownerInfoData.phonenum2" style="width: 100%;"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin:10px 0;">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("reportForm.idNumber")}} : &nbsp;</i-col>
                                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                    <i-input v-model.trim="ownerInfoData.idnum" style="width: 100%;"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin:10px 0;">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.gender")}} : &nbsp;</i-col>
                                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                    <i-select v-model="ownerInfoData.gender">
                                        <i-option value="1">{{$t("device.man")}}</i-option>
                                        <i-option value="0">{{$t("device.girl")}}</i-option>
                                    </i-select>
                                </i-col>
                            </Row>
                            <Row style="margin:10px 0;">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("reportForm.address")}} : &nbsp;</i-col>
                                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                    <i-input v-model.trim="ownerInfoData.address" style="width: 100%;"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin:10px 0;">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("monitor.remarks")}} : &nbsp;</i-col>
                                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                    <i-input v-model.trim="ownerInfoData.ownerremark" style="width: 100%;"></i-input>
                                </i-col>
                            </Row>
                        </div>
                        <div slot="footer">
                            <i-button type="primary" style="width: 100%" @click="handleEditDeviceex">{{$t("header.submit")}}</i-button>
                        </div>
                    </Modal>
                    <!-- 抓拍 -->
                    <Modal v-model="cameraModal" width="500" :mask-closable="false">
                        <p slot="header" style="color:#f60;text-align:center">
                            <Icon type="ios-create-outline"></Icon>
                            <span>{{$t("monitor.camera")}}</span>
                        </p>
                        <div style="text-align:center">
                            <Row style="margin:10px 0;">
                                <i-col span="6" style="height: 100%;text-align:right;line-height:32px;">
                                    {{$t("monitor.cameraChannel")}}&nbsp;&nbsp;
                                </i-col>
                                <i-col span="15" style="height: 100%;text-align:center;line-height:32px;">
                                    <i-select v-model="cameraChannel">
                                        <i-option :value="item" v-for="item in selectedDevObj.videochannelcount">{{$t("monitor.channel")}}{{item}}</i-option>
                                    </i-select>
                                </i-col>
                            </Row>
                            <Row style="margin:10px 0;">
                                <i-col span="6" style="height: 100%;text-align:right;line-height:32px;">
                                    {{$t("monitor.resolvingPower")}} &nbsp;&nbsp;
                                </i-col>
                                <i-col span="15" style="height: 100%;text-align:center;line-height:32px;">
                                    <i-select v-model="resolution">
                                        <i-option value="1">320*240</i-option>
                                        <i-option value="2">640*480</i-option>
                                        <i-option value="3">800*600</i-option>
                                        <i-option value="4">1024*768</i-option>
                                        <i-option value="5">176*144[Qcif]</i-option>
                                        <i-option value="6">352*288[Cif]</i-option>
                                        <i-option value="7">704*288[HALF D1]</i-option>
                                        <i-option value="8">704*576[D1]</i-option>
                                    </i-select>
                                </i-col>
                            </Row>
                        </div>
                        <div slot="footer" style="text-align:center;">
                            <i-button type="primary" style="width: 150px" @click="onClickCamera" :loading="loading">{{$t("header.submit")}}</i-button>
                            <i-button type="error" style="width: 150px" @click="cameraModal=false">{{$t("monitor.close")}}</i-button>
                        </div>
                    </Modal>
                    <Modal v-model="cameraImgModal" width="500">
                        <p slot="header" style="color:#f60;text-align:center">
                            <Icon type="ios-create-outline"></Icon>
                            <span>{{$t("monitor.camera")}}</span>
                        </p>
                        <div style="text-align:center">
                            <Row style="margin:10px 0;">
                                <i-col span="24">
                                    <img v-show="cameraImgUrl" :src="cameraImgUrl" style="width:100%;">
                                </i-col>
                            </Row>
                        </div>
                        <div slot="footer" style="text-align:center;">
                            <i-button type="primary" style="width: 150px" @click="onClickCameraDownload">{{$t("reportForm.download")}}</i-button>
                            <i-button type="error" style="width: 150px" @click="cameraImgModal=false">{{$t("monitor.close")}}</i-button>
                        </div>
                    </Modal>
                    <!-- 指令记录 -->
                    <Modal v-model="directiveReportModal" width="1100">
                        <p slot="header" style="color:#f60;text-align:center">
                            <Icon type="ios-create-outline"></Icon>
                            <span>{{currentDeviceName}} - {{$t("monitor.cmdRecord")}}</span>
                        </p>
                        <div>
                            <Tabs type="card">
                                <tab-pane :label="$t('monitor.toSendCmd')">
                                    <i-table :columns="cacheColumns" height="280" size="small" :data="cacheTableData" :loading="loading"></i-table>
                                </tab-pane>
                                <tab-pane :label="$t('monitor.directivesSent')">
                                    <i-table :columns="sendColumns" height="280" size="small" :data="sendTableData" :loading="loading"></i-table>
                                </tab-pane>
                            </Tabs>
                        </div>
                        <div slot="footer">
                            <i-button type="primary" @click="directiveReportModal = false" style="width: 100%">{{$t("monitor.confirm")}}</i-button>
                        </div>
                    </Modal>
                    </div>
    </script>

    <!-- 统计报表 -->
    <script type="text/x-template" id="report-template">
        <div class="report-wraper full">
            <div class="report-left-wrap" :style="{width:isCollapse?'49px':'240px'}">
                <div class="mar-nav">
                    <div class="collapse-wrap" @click="isCollapse=!isCollapse">
                        <!-- <Icon v-if="isCollapse" type="md-arrow-forward" size="24" />
                        <Icon v-else type="md-arrow-back" size="24" /> -->
                        <i v-if="isCollapse" class="icon iconfont icon-tuilatubiao-01"></i>
                        <i v-else class="icon iconfont icon-tuilatubiao"></i>
                    </div>
                    <div v-if="isCollapse" style="padding-top:49px">
                        <div v-for="(group,index) in reportNavList">
                            <Dropdown v-if="group.children" transfer placement="right-start" @on-click="handleClickDropdown">
                                <div style="width:49px;height:49px;text-align:center;line-height:49px;">
                                    <Icon :type="group.icon" size="20"></Icon>
                                </div>
                                <dropdown-menu slot="list">
                                    <template v-for="(item,idx) in group.children">
                                        <DropdownItem :name="item.name" :key="idx">
                                                {{item.title}}
                                        </DropdownItem>
                                    </template>
                                </dropdown-menu>
                            </Dropdown>
                            <div v-else="group.children">
                                <div style="width:49px;height:49px;text-align:center;line-height:49px;" @click="handleClickDropdown(group.name)">
                                    <Tooltip :content="group.title" placement="right" transfer>
                                        <Icon :type="group.icon" size="20"></Icon>
                                    </Tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                    <i-menu v-else :theme="theme" @on-select="selectditem" :active-name="activeName" :open-names="openedNames" ref="navMenu" accordion>
                        <template v-for="(group,index) in reportNavList">
                            <MenuItem :name="group.name" :key="index" v-if="!group.children">
                                <Icon :type="group.icon"></Icon>
                                    {{group.title}}
                            </MenuItem>
                            <Submenu :name="group.name" :key="index" v-if="group.children">
                                <template slot="title">
                                    <Icon :type="group.icon"></Icon>
                                    <span>{{ group.title}}</span>
                                </template>
                        <template v-for="(item,idx) in group.children">
                                    <MenuItem :name="item.name" :key="idx">
                                            <Icon :type="item.icon"></Icon>
                                            {{item.title}}
                                    </MenuItem>
                                </template>
                        </Submenu>
                        </template>
                    </i-menu>
                </div>
            </div>
            <div class="report-right-wrap" id="report-right-wrap" :style="{left:isCollapse?'49px':'240px'}"></div>
        </div>
    </script>

    <!-- 后台管理 -->
    <script type="text/x-template" id="manager-template">
        <div class="manager-wraper">
            <div class="mar-nav">
                <i-menu :theme="theme" @on-select="selectditem" accordion :active-name="activeName" :open-names="openedNames" ref="bgNavMenu">
                    <template v-for="(group,index) in navList">
                            <MenuItem :name="group.name" :key="index" v-if="!group.children">
                                <Icon :type="group.icon"></Icon>
                                    {{group.title}}
                            </MenuItem>
                            <Submenu :name="group.name" :key="index" v-if="group.children">
                                    <template slot="title">
                                        <Icon :type="group.icon"></Icon>
                                        <span>{{ group.title}}</span>
                                    </template>
                    <template v-for="(item,idx) in group.children">
                                        <MenuItem :name="item.name" :key="idx">
                                            <Icon :type="item.icon"></Icon>
                                            {{item.title}}
                                        </MenuItem>
                                    </template>
                    </Submenu>
                    </template>
                </i-menu>
            </div>
            <div class="mar-view mytable-scrollbar">
                <div id="mar-view"></div>
            </div>
        </div>
    </script>

    <!-- 系统参数 -->
    <script type="text/x-template" id="systemparam-template">
        <div class="manager-wraper">
            <div class="mar-nav">
                <i-menu :theme="theme" @on-select="selectditem" accordion>
                    <template v-for="(group,index) in navList">
                        <Submenu :name="group.name" :key="index" v-if="group.children">
                            <template slot="title">
                                <Icon :type="group.icon"></Icon>
                                <span>{{ group.title}}</span>
                            </template>
                    <template v-for="(item,idx) in group.children">
                                <MenuItem :name="item.name" :key="idx">
                                    <Icon :type="item.icon"></Icon>
                                    {{item.title}}
                                </MenuItem>
                            </template>
                    </Submenu>

                    <MenuItem :name="group.name" v-else="group.children">
                    <Icon :type="group.icon" />
                    <span>{{ group.title}}</span>
                    </MenuItem>
                    </template>
                </i-menu>
            </div>
            <div class="mar-view" id="system-view"></div>
        </div>
    </script>


    <!-- 规则 -->
    <script type="text/x-template" id="rule-template">
        <div class='rule-wrapper'>
            <div class='rule-nav'>
                <i-menu :theme="theme" @on-select="selectditem" :active-name="activeName">
                    <template v-for="(item,idx) in navList">
                        <MenuItem :name="item.name" :key="idx">
                            <Icon :type="item.icon"></Icon>
                            {{item.title}}
                        </MenuItem>
                    </template>
                </i-menu>
            </div>
            <div class='rule-view' id="rule-view"></div>
        </div>
    </script>

    <!-- 报警 -->
    <script type="text/x-template" id="waring-template">
        <div class="warning-wraper" :style="waringWraperStyle" v-if="activeComponent !== 'trackDebug'">
            <ul class="waring-controller" v-show="isLargen == 0">
                <li style="width:68px;border-left:1px solid #fff; "><span :class="{msgwaring:isWaring,msgnormal:!isWaring}">{{$t("alarm.message")}}</span></li>
                <li style="width:60px;cursor: pointer;border-right:1px solid #fff;">
                    <span @click="changeLargen(1)" :title="$t('alarm.open')"><Icon type="ios-browsers-outline" :size="14" /></span>
                    <span @click="changeLargen(2)" :title="$t('alarm.max')" style="margin-left:10px;"><Icon type="ios-square-outline" :size="16"/></span>
                </li>
            </ul>
            <div class="msg_main" v-show="isLargen !== 0">

                <div class="msg_header">
                    <ul>
                        <li :class="{selected:index == 6}" @click="changeComponent(6)">{{$t("alarm.realtimeInfo")}}</li>
                        <li :class="{selected:index == 4}" @click="changeComponent(4)">{{$t("alarm.emergencyAlarm")}}</li>
                        <li :class="{selected:index == 1}" @click="changeComponent(1)">{{$t("alarm.allAlarms")}}</li>
                        <li :class="{selected:index == 2}" @click="changeComponent(2)">{{$t("alarm.devMsg")}}</li>
                        <li :class="{selected:index == 5}" @click="changeComponent(5)">{{$t("alarm.mediaFiles")}}</li>
                        <li :class="{selected:index == 3}" @click="changeComponent(3)">{{$t("alarm.expirationInfo")}}({{overdueinfolist.length}})</li>
                        <li>
                            <Checkbox v-model="isMute">{{$t("alarm.voice")}}</Checkbox>
                        </li>
                        <li>
                            <Checkbox v-model="isPopup">{{$t("alarm.popup")}}</Checkbox>
                        </li>
                        <li @click="settingModal=true">
                            [{{$t("alarm.emergencyAlarmSetting")}}]
                        </li>
                    </ul>
                    <div class="shrink-btn">
                        <span @click="changeLargen(0)" :title="$t('alarm.min')">
                            <Icon type="md-remove" />
                        </span>
                        <span @click="changeLargen2()">     
                            <Icon type="ios-browsers-outline" :title="$t('alarm.changeWin')" />
                        </span>
                    </div>
                </div>
                <div class="msg_content">
                    <keep-alive>
                        <component :is="componentName" :tabletype="isLargen" :realtimeList="realtimeList" :waringrecords="waringRecords" :wrapperheight="wrapperHeight" :deviceinfolist="overdueDevice" :emergencyAlarmList="emergencyAlarmList" :overdueinfolist="overdueinfolist"
                            :mediaFileList="mediaFileLists" @on-sort-change="onSortChange" @deletemsg="deleteMsg" @showdisposemodal="showDisposeModalFrame">
                        </component>
                    </keep-alive>
                </div>
            </div>

            <!-- 过滤报警模态 -->
            <Modal v-model="settingModal" width="600">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>{{$t('alarm.filterAlarmTitle')}}</span>
                </p>
                <div>
                    <div>
                        <i-input v-model.trim="searchValue" icon="ios-close-circle-outline" style="width:100%;" :placeholder='$t("alarm.searchValuePlaceholder")' @on-click="searchValue=''"></i-input>
                    </div>
                    <div style="overflow:hidden;margin-top:12px;" @click="checkingSelectState">
                        <div style="width:33.33%;float:left;padding:2px 0;" v-for="(item,index) in alarmTypeList" :key="index" v-show="item.show">
                            <Checkbox v-model="checkboxObj[item.index]">{{ isZh ? item.alarmname : item.alarmnameen}}</Checkbox>
                        </div>
                    </div>
                </div>
                <div slot="footer">
                    <Row>
                        <i-col span="21">
                            <i-button type="primary" @click="setForceAlarmClick" style="width: 100%">{{$t("monitor.confirm")}}</i-button>
                        </i-col>
                        <i-col span="3" style="text-align: center;line-height: 32px;" @click.native="onCheckAll">
                            <Checkbox :value="checkAll">{{isZh ? '全选' :'All'}}</Checkbox>
                        </i-col>
                    </Row>
                </div>
            </Modal>

            <!-- 接触报警模态 -->
            <Modal v-model="disposeModal" width="560">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>{{$t('alarm.releaseAlarmTitle')}}</span>
                </p>
                <div>

                    <Row style="margin: 10px 0">
                        <i-col span="24" style="height: 100%;text-align:center;line-height:32px;">
                            {{$t('alarm.releaseAlarmTitle')}}
                        </i-col>
                    </Row>

                </div>
                <div slot="footer">
                    <i-button type="primary" style="width: 100%" @click="sendDisposeWaring">{{$t("monitor.confirm")}}</i-button>
                </div>
            </Modal>
        </div>
    </script>

    <script type="text/x-template" id="table-dropdown-template">
        <Dropdown transfer @on-click="onClickItem">
            <i-button type="info" size="small">
                {{$t("monitor.more")}}
                <Icon type="ios-arrow-down"></Icon>
            </i-button>
            <dropdown-menu slot="list" style="overflow-x:hidden;">
                <DropdownItem name="oil">{{$t("device.oilMarking")}}</DropdownItem>
                <DropdownItem name="weight">{{$t("device.weightMarking")}}</DropdownItem>
                <DropdownItem name="io">{{$t("device.ioConfig")}}</DropdownItem>
                <DropdownItem name="resetPass">{{$t("user.resetPwd")}}</DropdownItem>
                <!-- <DropdownItem name="exceededSpeed">{{$t("device.speedingSetting")}}</DropdownItem> -->
                <DropdownItem name="charge">{{$t("bgMgr.renew")}}</DropdownItem>
                <DropdownItem name="clean">{{$t("bgMgr.clean")}}</DropdownItem>
            </dropdown-menu>
        </Dropdown>
    </script>

    <script type="text/x-template" id="rule-allocation-template">
        <Modal v-model="modal" width="700" @on-visible-change="onVisibleChange">
            <p slot="header" style="color:#f60;text-align:center;height:32px;">
                <RadioGroup v-model="allocationType" type="button">
                    <Radio label="1">
                        <Icon type="md-settings"></Icon>
                        <span>{{$t('rule.distributionByRule')}}</span>
                    </Radio>
                    <Radio label="2">
                        <Icon type="md-tablet-portrait"></Icon>
                        <span>{{$t('rule.distributionByDevice')}}</span>
                    </Radio>
                </RadioGroup>
            </p>
            <Row>
                <i-Col span="12" style="padding-left:15px">
                    <i-input v-model.trim="sosoValue1" style="width:240px" @on-change="onSearchChange1">
                        <Icon type="ios-search-outline" slot="prepend"></Icon>
                    </i-input>
                </i-Col>
                <i-Col span="12" style="padding-left:15px">
                    <i-input v-model.trim="sosoValue2" style="width:240px" @on-change="onSearchChange2">
                        <Icon type="ios-search-outline" slot="prepend"></Icon>
                    </i-input>
                </i-Col>
            </Row>
            <div v-if="allocationType=='1'">
                <Row>
                    <i-Col span="12" style="height:420px;overflow-y: auto;">
                        <v-tree :data="ruleLists1" radio @node-select="onSelectRule"></v-tree>
                    </i-Col>
                    <i-Col span="12" style="height:420px;overflow-y: auto;">
                        <v-tree :data="groupLists1" multiple ref="checkTree1" :halfcheck='true'></v-tree>
                    </i-Col>
                </Row>
            </div>
            <div v-if="allocationType=='2'">
                <Row>
                    <i-Col span="12" style="height:420px;overflow-y: auto;">
                        <v-tree :data="groupLists2" radio @node-select="onSelectDevice"></v-tree>
                    </i-Col>
                    <i-Col span="12" style="height:420px;overflow-y: auto;">
                        <v-tree :data="ruleLists2" multiple ref="checkTree2"></v-tree>
                    </i-Col>
                </Row>
            </div>
            <div slot="footer" style="text-align:center">
                <i-button type="error" @click="onClose" style="width: 160px">{{$t('rule.close')}}</i-button>
                <i-button type="primary" @click="settingRuleToDevice" style="width: 160px">{{$t('rule.confirm')}}</i-button>
            </div>
        </Modal>
    </script>


    <script type="text/x-template" id="select-checkbox-template">
        <div class='search-wrapper' v-click-outside.capture="onClickOutside">
            <div class="select-input" @click="isShowCheckbox=true" v-text="checkboxStr"></div>
            <transition name="fade">
                <div class="search-item-wrapper" v-show="isShowCheckbox">
                    <div>
                        <Checkbox v-model="isAll" @on-change="onChange"><span>{{$t('monitor.all')}}</span></Checkbox>
                    </div>
                    <CheckboxGroup v-model="checkboxList">
                        <div v-for="(item , index) in ioCount">
                            <Checkbox :label="index+1"><span>IO_{{index + 1}}</span></Checkbox>
                        </div>
                    </CheckboxGroup>
                </div>
            </transition>
        </div>
    </script>



    <script type="text/x-template" id="video-template">
        <div class='my-video-wrapper'>
            <div class='player-wraper' @dblclick="onDbClick">
                <video ref='player'></video>
                <div class="resolving-power" v-show="resolvingPower.width">
                    <span v-text='resolvingPower.width'></span> *
                    <span v-text='resolvingPower.height'></span>
                </div>
                <div class="state-event-tip" v-text="playerStateTips"></div>
            </div>
            <div class="my-video-control">
                <div class='device-states' v-show="deviceId">
                    <span v-text='deviceName'></span>
                    <span v-text='channelStr'></span>
                    <span v-text='networkSpeed'></span>
                    <video ref='audio' style="display: none;"></video>
                </div>
                <div class='video-controls'>
                    <span @click="switchVideoPlayState"><i class="icon iconfont" :class="{'icon-bofang':!isPlaying,'icon-zanting':isPlaying}"></i></span>
                    <span @click="handlePlayerMute"><i class="icon iconfont" :class="{'icon-yinliang':!isMute,'icon-guanbiyinliang':isMute}"></i></span>
                    <span @click="flv_photograph"><i class="icon iconfont icon-camera"></i></span>
                    <span @click="handleFullScreen"><i class="icon iconfont" :class="{'icon-quanping':!isFullScreen,'icon-tuichuquanping':isFullScreen}"></i></span>
                </div>
            </div>
        </div>
    </script>



    <script type="text/x-template" id="selected-map-template">
        <div class="selected-map-wrap" v-click-outside.capture="onClickOutside">
            <div class="selected-map-inner" @click="isShowMapList=true">
                <div class="map-icon" :title="mapTypeStr"><img :src="mapIcon"></div>
            </div>
            <div class="selected-map-list" v-show="isShowMapList">
                <div v-for="(item,index) in mapSelectorList" :data-index="index" :class="{actived:mapType==item.value}" :key="index" @click="selectedMap(index)">
                    <div class="map-icon" :title="item.label">
                        <img :src="item.src">
                    </div>
                </div>
            </div>
            <div class="map-selector-popup" v-show="isShowMapList" :style="mapSelectorPopupSty">
                <div v-if="false" class="MapSelector_item_193IR" :class="{'map_icon_xiansu_off':!isShowXianSu,'map_icon_xiansu_on':isShowXianSu}" style="width:35px" @click="isShowXianSu=!isShowXianSu">
                    <div class="map_selector_icon_text no_selected_icon">{{speed}}</div>
                </div>
                <div class="MapSelector_item_193IR" :class="{'map_icon_traffic_off':!isShowTraffic,'map_icon_traffic_on':isShowTraffic}" style="width:35px" @click="isShowTraffic=!isShowTraffic">
                    <div class="map_selector_icon_text no_selected_icon">{{traffic}}</div>
                </div>
                <div class="MapSelector_item_193IR normal-map" @click="isSatelliteMap=false">
                    <div class="map_selector_icon_text" :class="{'selected_icon':!isSatelliteMap,'no_selected_icon':isSatelliteMap}">{{map}}</div>
                </div>
                <div class="MapSelector_item_193IR satellite-map" @click="isSatelliteMap=true">
                    <div class="map_selector_icon_text" :class="{'selected_icon':isSatelliteMap,'no_selected_icon':!isSatelliteMap}">{{satellite}}</div>
                </div>
            </div>
        </div>
    </script>


    <script type="text/x-template" id="dropdown-tree-template">
        <div class="search-wrapper" v-click-outside.capture="onClickOutside">
            <i-input v-model.trim="sosoValue" autocomplete="new-password" icon="ios-close-circle-outline" @on-change="sosoValueChange" @on-focus="focus" @on-click="onClickIcon"></i-input>
            <transition name="fade">
                <div class="search-item-wrapper" v-show="isShowMatchDev">
                    <Tree :data="innerTreeData" show-checkbox @on-check-change="onCheckChange"></Tree>
                </div>
            </transition>
        </div>
    </script>

    <script type="text/x-template" id="map-mark-template">
        <div class="map-mark">
            <div v-if="isClose" class="map-mark-close" @click="isClose=false">
                <div>{{isZh?'标':'M'}}</div>
                <div>{{isZh?'注':'K'}}</div>
            </div>
            <div v-else class="map-mark-wrapper">
                <div class="map-mark-header">
                    <div class="close-btn" @click="isClose=true">
                        <Icon type="ios-arrow-forward" size="18" />
                    </div>
                    <div class="map-mark-header-content">
                        <div></div>
                    </div>
                </div>
                <div class="map-mark-content">
                    <div class="map-mark-content-search">
                        <Row>
                            <i-col span="17" offset="1">
                                <i-input v-model.trim="sosoValue" autocomplete="new-password" size="small" icon="ios-close-circle-outline" @on-change="sosoValueChange" @on-focus="focus" @on-click="onClickIcon"></i-input>
                            </i-col>
                            <i-col span="4" offset="1">
                                <i-button type="primary" size="small" @click="setCustomMarker">{{$t('bgMgr.manage')}}</i-button>
                            </i-col>
                        </Row>
                    </div>
                    <div class="map-mark-inner-content">
                        <Tree :data="treeData" show-checkbox @on-check-change="onCheckChange"></Tree>
                    </div>
                </div>
            </div>
        </div>
    </script>

    <audio id="myaudio" src="./custom/sos.mp3"></audio>
    <script src="dist/vue.min.js"></script>
    <script src="dist/vuex.min.js"></script>
    <script src="dist/elementui.js"></script>
    <script src="js/v-click-outside-x.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/vue-i18n.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/zh-CN.js"></script>
    <script src="js/en-US.js"></script>
    <script src="js/msgmgr.js"></script>
    <script src="js/config.js"></script>
    <script src="js/pinyinhanzi.js"></script>
    <script src="js/alrammgr.js"></script>
    <script src="js/language.js"></script>
    <script src="custom/languageex.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/jquery.ztree.all.min.js"></script>
    <script src="js/gps51-jquery.md5.js"></script>
    <script src="js/transformlatlon.js"></script>
    <script src="js/hashmap.js"></script>
    <script src="js/localcachemgr.js"></script>
    <script src="js/util.js"></script>
    <script src="js/websocketmgr.js"></script>
    <script src="js/area.js"></script>
    <script src="./js/protobuf.js"></script>
    <script src="./js/respDeviceLastPositionProto.js"></script>
    <script src="./js/RespMonitorDeviceListProto.js"></script>
    <script src="js/lame.min.js"></script>
    <script src="js/monitorv2.js"></script>
    <script src="./maptalks/maptalks.min.js"></script>
    <script src="./maptalks/maptalks.markercluster.js"></script>
    <script src="js/reportform.js"></script>
    <script src="js/bgmanager.js"></script>
    <script src="js/rulemgr.js"></script>
    <script src="js/alarmcomponent.js"></script>
    <script src="js/xlsx.full.min.js"></script>
    <script src="js/myxlsx.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="./js/mpegts.js"></script>
    <script src="./js/adapter.js"></script>
    <script src="./js/jswebrtc.js"></script>
    <script src="./js/player.js"></script>
    <script src="./js/video-element.js"></script>
    <script src="./js/v2-tree.js"></script>
    <script src="./js/globalorgan.js"></script>
    <script src="./js/qrcode.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>